Let me start by saying that I’ve been banging my head against the wall for at least a week with this problem. I can’t seem to find anyone with the knowledge or willing to assist.
I am a newbie and am learning as I go.
I am currently working on a new project which required a slider featuring videos with thumbnails on the left and right. I’ve pretty much got the layout where I need it (for starters) but can’t for the life of me seem how to link the thumbnails to activate it’s designated slider.
For example, click on first thumb and slider will advance to first video,…click on third and slides to third video. (Just to clarify, case the first part was confusing).
This is actually quite easy to fix.
Just add a data-slide attribute to each of the thumbnails, like so (giving the aside a class of "thumbs):
<aside class="thumbs">
<p data-slide="0"><img alt="Overview" src="http://www.saintleo.edu/VirtualTour/Images/Overview-thumb.jpg">
Overview</p>
<p data-slide="1"><img alt="St. Leo Abbey" src="http://www.saintleo.edu/VirtualTour/Images/St.LeoAbbey-thumb.jpg">
St. Leo Abbey</p>
<p data-slide="2"><img alt="Athletics" src="http://www.saintleo.edu/VirtualTour/Images/Athletics-thumb.jpg">
Athletics</p>
<p data-slide="3"><img alt="Student Community Center" src="http://www.saintleo.edu/VirtualTour/Images/StudentCommunityCenter-thumb.jpg">
Student Community Center</p>
<p data-slide="4"><img alt="School of Education & Social Services" src="http://www.saintleo.edu/VirtualTour/Images/SchoolOfEducation&SocialServices-thumb.jpeg">
School of Education & Social Services</p>
</aside>
and
<aside class="thumbs">
<p data-slide="5"><img alt="Freshman Residence Halls" src="http://www.saintleo.edu/VirtualTour/Images/FreshmanResidenceHalls-thumb.jpg">
Freshman Residence Halls</p>
<p data-slide="6"><img alt="School of Arts & Sciences" src="http://www.saintleo.edu/VirtualTour/Images/SchoolOfArts&Sciences-thumb.jpg">
School of Arts & Sciences</p>
<p data-slide="7"><img alt="Residence Apartments" src="http://www.saintleo.edu/VirtualTour/Images/ResidenceApartments-thumb.jpg">
Residence Apartments</p>
<p data-slide="8"><img alt="Student Activities Building" src="http://www.saintleo.edu/VirtualTour/Images/StudentActivitiesBuilding-thumb.jpg">
Student Activities Building</p>
<p data-slide="9"><img alt="School of Business" src="http://www.saintleo.edu/VirtualTour/Images/SchoolOfBusiness-thumb.jpg">
School of Business</p>
</aside>