Счетчик обновлений в слайдере

Question

У меня есть ползунок, который я построил сам, это карусель, который бесконечно петли. Я хочу создать счетчик (1 из 4, 2 из 4) и т. Д., При этом последним номером будет общее количество доступных слайдов, а также дисплеи 1/2/3/4, которые вы просматриваете.

Это то, что я до сих пор для моего счетчика:

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> 

И это мой JS для карусели, если это помогает

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'); 
}); 

Многие спасибо, R

Answer 1

Вместо того, чтобы постоянно читать и преобразовывать содержимое $curr элемента его, вероятно, лучше следить в другой переменной, например, так:

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(); 

Это будет подсчитывать до последнего слайда. Обязательно позвоните по номеру changeCurr() при каждом переходе по слайду.