Sudo Slider jQuery Plugin - Callbacks 1 demo

afterAniFunc & beforeAniFunc in docs
  • image description
  • image description
  • image description
  • image description
  • image description
Slide:1 of 5
The src of the image: images/01.jpg

Usage

Include the javascripts

<script type="Text/Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.sudoSlider.min.js"></script>

The Javascript to start it.

<script type="text/javascript" >
    $(document).ready(function(){	
        var sudoSlider = $("#slider").sudoSlider({
           prevNext: false,
           numeric: true,
           beforeAniFunc: function(t){ 
              $('div.descrip-text #anistate').text('Animating to slide ' + t).show(600);
           },
           afterAniFunc: function(t){ 
              $('div.descrip-text #anistate').hide(400);
              $('div.descrip-text #slidenumber').text(t);
              var text = $(this).children().attr('src');
              $('div.descrip-text #slidehtml').text(text);
           }
        });
    });
</script>

The CSS

#slider {
    width:696px;
}
#slider img{
    border:none;
}
#slider ul, #slider li{
    margin:0;
    padding:0;
    list-style:none;
}
#slider li { 
    width:696px;
    overflow:hidden; 
}

The HTML

<div id="slider" >
    <ul>
        <li><img src="../images/01.jpg" alt="image description"/></li>
        <li><img src="../images/02.jpg" alt="image description"/></li>
        <li><img src="../images/03.jpg" alt="image description"/></li>
        <li><img src="../images/04.jpg" alt="image description"/></li>
        <li><img src="../images/05.jpg" alt="image description"/></li>	
    </ul>
</div>
<div class="descrip-text"><p id="anistate" style="display: none; ">Animating to slide 1</p>
Slide:<span id="slidenumber">1</span> of 5 <br> The src of the image: 
<span id="slidehtml">images/01.jpg</span></div>