CODEWITHSUNDEEP
jquerycarouselcounter
Joseph Sjoblom
Joseph Sjoblom

Reputation: 171

Simple Carousel - Issue with Prev Button

I'm using a simple script I found to try to build a carousel. The initial code was an automated animated transition from one image to the next. I'm attempting to do the similar thing, but instead with a prev/next button.

The next button is working fine, but I'm know I'm not using the wrong syntax for the prev button. I'm not exactly sure how the variables should be structured.

Can someone help?

Here's an example of what I'm referring to:

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

example code: http://jsfiddle.net/zd6D8/2/

Upvotes: 0

Views: 82

Answers (1)

Hackerman
Hackerman

Reputation: 12295

Try this:

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

Working fiddle: http://jsfiddle.net/robertrozas/zd6D8/5/

Upvotes: 1

Related Questions