Sudo Slider jQuery Plugin - Basic callbacks

Usage

Include the javascripts

<script type="Text/Javascript" src="http://code.jquery.com/jquery-1.11.2.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({
         numeric: true,
         beforeAnimation: function(slide){
            $('div.descrip-text #anistate').text('Animating to slide ' + slide).show(600);
         },
         afterAnimation: function(slide){
            $('div.descrip-text #anistate').hide(400);
            $('div.descrip-text #slidenumber').text(slide);
            var text = $(this).children().attr('src');
            $('div.descrip-text #slidehtml').text(text);
         },
         initCallback: function() {
            var slide = this.getValue("currentSlide");
            $('div.descrip-text #slidenumber').text(slide);

            var text = this.getSlide(slide).children().attr('src');
            $('div.descrip-text #slidehtml').text(text);
         }
      });
   });
</script>

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; "></p>
Slide:<span id="slidenumber"></span> of 5 <br> The src of the image:
<span id="slidehtml"></span></div>