How to navigate to slides directly via using "moveto" function

Here is an example of navigating between slides using moveto function.

Example

jQuery Slideshow plugin slide 1 photo
jQuery Slideshow plugin slide 2 photo
jQuery Slideshow plugin slide 3 photo
jQuery Slideshow plugin slide 4 photo
HTML & Script
<div class="rst-slides" id="example1">
    <div class="rst-slide">
        <img src="pic-1.jpg" />
    </div>
    <div class="rst-slide">
        <img src="pic-2.jpg" />
    </div>
    <div class="rst-slide">
        <img src="pic-3.jpg" />
    </div>
    <div class="rst-slide">
        <img src="pic-4.jpg" />
    </div>
</div>
<ul>
   <li>
       <button onclick='$("#example1").slides("moveto", {index : 0});'>Slide 1</button></li>
   <li>
       <button onclick='$("#example1").slides("moveto", {index : 1});'>Slide 2</button></li>
   <li>
       <button onclick='$("#example1").slides("moveto", {index : 2});'>Slide 3</button></li>
   <li>
       <button onclick='$("#example1").slides("moveto", {index : 3});'>Slide 4</button></li>
</ul>
<link href="slides.css" rel="Stylesheet" />
<script src="slides.js" type="text/javascript"></script>
<script src="swipe.js" type="text/javascript"></script>
<script type="text/javascript">
    $(window).load(function () {
        $("#example1").slides({NextHandle : $(""), PrevHandle : $(""), Circular : true });
    });
</script>

Window load event of jQuery is used because slides contain images and this event will wait for images to get loaded before firing slideshow plugin into action.

License & Download Slideshow Plugin
Chat With Us Close
Leave Message