Простая карусель - проблема с предыдущей кнопкой

#jquery #carousel #counter

#jquery #карусель #счетчик

Вопрос:

Я использую простой скрипт, который я нашел, чтобы попытаться создать карусель. Первоначальный код представлял собой автоматический анимированный переход от одного изображения к следующему. Я пытаюсь сделать то же самое, но вместо этого с помощью кнопки prev / next.

Следующая кнопка работает нормально, но я знаю, что я не использую неправильный синтаксис для предыдущей кнопки. Я не совсем уверен, как должны быть структурированы переменные.

Может кто-нибудь помочь?

Вот пример того, что я имею в виду:

 (function($){
$.fn.MySlider = function(interval) {
    var slides;
    var cnt;
    var amount;
    var i;

    $('.prev').click(function(){
        $(slides[i]).fadeOut(1000);
        i--;
        if (i <= amount) i = 0;
        $(slides[i]).fadeIn(1000);

        // updating counter
        cnt.text(i 1 ' of ' amount);

        // loop
        setTimeout(run, interval);
    });

    $('.next').click(function(){
        $(slides[i]).fadeOut(1000);
        i  ;
        if (i >= amount) i = 0;
        $(slides[i]).fadeIn(1000);

        // updating counter
        cnt.text(i 1 ' of ' amount);

        // loop
        setTimeout(run, interval);
    });

    slides = $('#my_slider').children();
    cnt = $('#counter');
    amount = slides.length;
    i=0;

    // updating counter
    cnt.text(i 1 ' of ' amount);

    setTimeout(run, interval);
};
})(jQuery);

// custom initialization
jQuery(window).load(function() {
    $('.smart_gallery').MySlider(3000);
});

пример кода: http://jsfiddle.net/zd6D8/2 /

Ответ №1:

Попробуйте это:

  $('.prev').click(function(){
        $(slides[i]).fadeOut(1000);
        i--;
        if (i < 0) i = 0;
        $(slides[i]).fadeIn(1000);
        // updating counter
        cnt.text(i 1 ' of ' amount);
        // loop
        setTimeout(run, interval);
    });