Desperately need help linking thumbnails to slides (Flexslider)

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).

Here’s my test page.

http://www.saintleo.edu/VirtualTour/video.html

Thank you in advance for your time and assistance. I GREATLY appreciate it.

Hi kinney0201 . Welcome to the forums. :slight_smile:

Did you just grab the basic version of Flexslider? What you should do is get the closest example to what you want, which looks like this one:

http://flexslider.woothemes.com/thumbnail-controlnav.html

That way, the functionality is already there. Just shift the thumbnails to where you want them via CSS. :slight_smile:

Thanks, Ralph.

The problem is that I spent most of my time figuring out how to get the page where and how I needed it to be before picking a slider.

I have my thumbnails exactly where I want them, so now I’m stuck.

No way around starting over, huh?

Hi there,

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>

Then before the closing </body> tag add this:

<script>
  $('aside.thumbs > p').on("click", function(){
    $('.flexslider').flexslider($(this).data("slide"));
  });
</script>

Here’s a demo of it working.

Also, you’re using a semi-colon to separate values in your viewport meta tag. AFAIK, this is wrong! Use a comma instead.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

Hope that helps.

Pullo,

I don’t know how to thank you.

I’ve spent over a week trying to figure this out on multiple forums and with your help, it literally took me five minutes to get it working.

You are fantastic!!! Thank you so very much!!

Kind regards,
JK

You’re welcome :slight_smile:
Thanks for taking the time to report back and let us know it worked.