JS slider counter not working...need to find a way to make it work as it should

Question

i need some help to make this slider counter work, am currently using sudoslider but can't seem to make it work as i want, can anyone help tryed from slider docs but doesn't work as it should...needs to modify it's number as slides go on like 1/2..2/2 somethn' like that...?

          html code:

          <div id="slider">
                <ul>
      <li><img src="images/1.png" alt="img"></li>
      <li><img src="images/2.png" alt="img"></li>
      <li><img src="images/3.png" alt="img"></li>
                </ul>
      </div>
    <div class="siteBtn">
    <a href="#">
    Visit Us
    </a>
    </div>
    <div class="sliderBtn">
        <a href="#" class="customLink" rel="prev"><img src="images/prevBtn.png" alt="img"></a>
    <a href="#" class="customLink" rel="next"><img src="images/nextBtn.png" alt="img"></a>
    </div>
    <div class="descrip-text"><p id="anistate"  ></p>
        <span>Slide:</span>
        <span id="slidenumber"></span> 
        <span>/5</span> 
    </div> 


    JS code:
    $(document).ready(function(){   
    var sudoSlider = $("#slider").sudoSlider({
       customLink:'a.customLink',
       prevNext:false,
       controlsFade:false
       // customlink:true
    });
});


      $(document).ready(function(){
            var sudoSlider = $("#slider").sudoSlider({
               numeric: true,
              beforeAnimation: function(slide){
                 $('div.descrip-text #anistate').text(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);
          }
       });
    });

Answer 1

I'm not sure if this is what you wanted to achieve but check this fiddle: http://jsfiddle.net/3NVhR/1/

$(document).ready(function () {
    var sudoSlider = $("#slider").sudoSlider({
        customLink: 'a.customLink',
        prevNext: false,
        controlsFade: false,
        auto: true,
        afterAnimation: function (slide) {
            var slide = sudoSlider.getValue("currentSlide");
            $('div.descrip-text #slidenumber').text(slide);
        },
        initCallback: function() {
            var slides = sudoSlider.getValue('totalSlides');
            $('div.descrip-text #slidenumber').next('span').text("/ " + slides);
        }
    });
});