• 7/2/2013
• 1825
• Rudra Softtech LLP, jQuery Plugins, Best Web Development Company

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

Example

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.