jQuery slider / Posts /

Is it possible to navigate to a given slide?

I have a long list of slides. I plan to use content slider with thumbnails. Is it possible to navigate to a given slide by clicking a link on the page? (I would like to do it dynamically, without reopening the page.) (Class "each" divs are identfied by id)
Andras  4 years ago   viewed: 5491    

10 Answers

How would you use this in a situation where there are multiple thumbnail sliders on the same page?
Rory   3 years ago
ok that helped a little but not really what I was after I already have multiple slides working, I did notice though that each slide var thumbnailSlider1, var thumbnailSlider2, var thumbnailSlider3 needed a different name, before I had each as var thumbnailSlider which strangely still worked.

Where though do I need to put the script in my code. so that on page load it starts on a particular slide? And is: <script> thumbnailSlider2.displaySlide(3); </script> all I need? (thumbSlider2 being the thumbnail slider I want to set)
  3 years ago
Maybe I should give you this post:

As the Content Slider will take some time to load and start rotating, you can delay the displaySlide call:
<script>setTimeout(function(){ thumbnailSlider2.displaySlide(3); }, 400);</script>
And it is better to place the script at the end of the page, just before the closing tag </body>.
(If the timer has been delayed longer enough, putting it in the head section is also all right).
Milo   3 years ago
Milo you are a champion. that works great but would it matter if someone has a slow connetion? I wonder if there is a better way like checking if the slider has loaded?
  3 years ago
For anyone else may or maynot be the best solution but it works:
var readyStateCheckInterval = setInterval(function() { if (document.readyState === "complete") { thumbnailSlider2.displaySlide(3); clearInterval(readyStateCheckInterval); } }, 10);
checks to see if the page has finished loading completely before running.
  3 years ago
Expanded this to take the slide no. from a span tag inside my slide. so I could set it there dynamically. Also adjusting for the zero-based slideIndex.
in thumbnail-slider.js
var readyStateCheckInterval = setInterval(function() { if (document.readyState === "complete") { $startSlide = document.getElementById("StartSlide").innerHTML; $startSlide = $startSlide-1; thumbnailSlider2.displaySlide($startSlide); clearInterval(readyStateCheckInterval); } }, 50);
  3 years ago
The jQuery Slider has a built-in function display(slideIndex) that you can use. For example:
<script> mcThumbnailSlider.display(3); </script>
Note the slideIndex is zero-based.
milo   4 years ago
Excellent! This is EXACTLY, what I expected from your superior tool :) 
Is a user documentation avaliable somewhere, where I could find these kind of usefull functionalities?
  4 years ago
Glad to know it works for you. As this function is not frequently used, we didn't mention it in our page. We will add it to the page in the future update.
milo   4 years ago


Your name*
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question: