Using various callback function of Slideshow jQuery plugin

Slideshow exposes the following callback function, which can be used for various purposes:

  • OnInit

    Function is called on initialization of each slideshow.

  • OnInitComplete

    Function is called on completion of initialization of each slideshow.

  • OnPaused

    Function is called when slideshow is paused.

  • OnChange

    Function is called when slide is changed.

  • OnStart

    Function is called when slideshow goes to first slide.

  • OnEnd

    Function is called when slideshow goes to last slide.

Example
jQuery Slideshow plugin slide 1 photo
jQuery Slideshow plugin slide 2 photo
jQuery Slideshow plugin slide 3 photo
HTML & Script
<div class="rst-slides" id="example1">
    <div class="rst-slide">
        <img src="rect-1.jpg" /></div>
    <div class="rst-slide">
        <img src="rect-2.jpg" /></div>
    <div class="rst-slide">
         <img src="rect-3.jpg" /></div>
</div>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" type="text/javascript"></script>
<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">
    $(document).ready(function () {
        $("#example1").slides({
            OnInit: function () { console && console.log("Slideshow is initialized"); },
            OnInitComplete: function () { console && console.log("Slideshow is initialization complete"); },
            OnPaused: function () { console && console.log("Slideshow is paused"); },
            OnChange: function (oldindex, newindex) { console && console.log("Slideshow slide change from " + oldindex + " to " + newindex); },
            OnStart: function () { console && console.log("First Slide") },
            OnEnd: function () { console && console.log("Last Slide") }
        });
    });
</script>
License & Download Slideshow Plugin
Chat With Us Close
Leave Message