jQuery slider / Posts /

Is it possible to navigate to a given slide?

17
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  11 years ago   viewed: 10636    

9 Answers

-1
How would you use this in a situation where there are multiple thumbnail sliders on the same page?
Rory   10 years ago
0
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)
Rory
  10 years ago
2
Maybe I should give you this post:
http://www.menucool.com/1802/Multiple-jQuery-sliders-on-one-page

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   10 years ago
0
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?
Rory
  10 years ago
-1
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.
Rory
  10 years ago
0
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);
Rory
  10 years ago
1
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   11 years ago
0
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?
Andras
  11 years ago
0
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   11 years ago

   

Your name*
Password
(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:
▲