Question

I have a slider that I’ve built myself, which is a carousel that infinitely loops. I’m wanting to create a counter (1 of 4, 2 of 4) etc, with the last number being the total number of slides present and the 1/2/3/4 displays which slide you are viewing.

This is what I have so far for my counter:

var $tota = $('.past-project-container').find('span.total');
var $curr = $('.past-project-container').find('span.current');

function changeCurr(){
    $tota.text(numberOfProjects);
    $curr.text(1);
}
    changeCurr();

HTML:

<span class="slide-count-container">
   <span class="current">1</span> of <span class="total">1</span>
</span>

And this is my JS for the carousel if it helps

var $carousel = $('.past-project-slider'), carW = $carousel.outerWidth(), intv;
$carousel.wrapInner('<div id="slider" />');
var $slider = $('#slider');
numberOfProjects = $('.past-project-each').length;
$slider.css({position:'absolute',left:0, width:carW*numberOfProjects}).find('.past-project-each').css({'float':'left'});

function move(cb){
  if(!$slider.is(':animated')){
    if(cb=='next'){
        $slider.animate({left:-carW},800,function(){
            $slider.append($('.past-project-each:first'));
            $slider.css({left:0});
        });    
    }else{
        $slider.prepend($('.past-project-each:last'));
        $slider.css({left:-carW});
        $slider.animate({left:0},800); 
    }
  }
}

$('#next-past-project, #prev-past-project').click(function(){  
    var btn = this.id=='next-past-project' ? move('next') : move('prev');  
});

Many thanks,
R

Answer 1

Rather than constantly reading and converting the contents of the $curr element its probably better to keep track in another variable, like so:

var $tota = $('.past-project-container').find('span.total');
var $curr = $('.past-project-container').find('span.current');

var currentIndex = 0;

function changeCurr(){
    $tota.text(numberOfProjects);

    // If we've not reached the final index, add one, else return to the start
    currentIndex = (currentIndex == numberOfProjects) ? 1 : currentIndex + 1;
    $curr.text(currentIndex);
}

changeCurr();

This will count up until the last slide. Be sure to call changeCurr() on each slide transition.