Continuous JS Slider

Question

For this "photo image" slider, I'm almost there: http://jsfiddle.net/4z4Lok9y/1/

When I get to slide 3 and hit "next" I would like it to return to slide 1. (Without the jumping through slide 2, the "jerky motion).

Same for when I'm on slide 1 and hit "prev" I would like to go to slide 3 without the jumping around.

What is the minimal, easiest way to fix my jsfiddle for this motion?

$(document).ready(function(){
    var slides = $('.js-slide');
    var i = 0;
    $('.navigation a.nav-right').click(function(){
    i = ++i % slides.length;
    $('.slide-wrapper').animate(
    {
        'left' : -(slides.eq(i).position().left)},300);
    });
    $('.navigation a.nav-prev').click(function(){
    i = --i % slides.length;
    $('.slide-wrapper').animate(
    {
        'left' : -(slides.eq(i).position().left)},300);
    });
});

Thanks,

Answer 1

maybe like this http://jsfiddle.net/4z4Lok9y/2/

$(document).ready(function(){
        var slides = $('.js-slide');
        var i = 0;
        $('.navigation a.nav-right').click(function(){
            i = ++i % slides.length;

            if(i==0)
            {
                var l=0                
                $('.slide-wrapper').css('left',l);
                return;
            }

            $('.slide-wrapper').animate({
                'left' : -(slides.eq(i).position().left)},300);
        });

        $('.navigation a.nav-prev').click(function(){
            i = --i % slides.length;

            if(i==-1)
            {
                var l=-slides.eq(i).position().left                
                $('.slide-wrapper').css('left',l);
                return;
            }

            $('.slide-wrapper').animate({
                'left' : -(slides.eq(i).position().left)},300);
            });

});

Answer 2

I'm assuming you want it to animate between the first and last slide, but do not show the slides in between. This allows you to have as many slides as you want (within reason), and still keep the smooth animation effect.

To do this you need to hide the slides in between and then animate. Then directly after the animation un-hide all the slides.

JSFiddle Demo

$(document).ready(function(){
        var slides = $('.js-slide');
        var i = 0;
        $('.navigation a.nav-right').click(function(){
            i = ++i % slides.length;

            //if we're going from the last slide to the first, hide all the slides
            //and re-position the slide-wrapper
            if (i ==0) {
                $('.module-body').not(':first').not(':last').css('display','none');
                $('.slide-wrapper').css('left', -(slides.eq(-1).position().left));
            }

            $('.slide-wrapper').animate(
            {
                'left' : -(slides.eq(i).position().left)
            },300, function() {
                //After we finish animating be sure to show the slides again
                //you could wrap this in a if statement if you wanted, to only try displaying
                //the slides if i is 0. Might save a bit, but for the example I didn't bother with
                //optimizations.
                $('.module-body').not(':first').not(':last').css('display','block');
            });
        });
        $('.navigation a.nav-prev').click(function(){
            i = --i % slides.length;

            if (i == -1) {
                $('.module-body').not(':first').not(':last').css('display','none');
                $('.slide-wrapper').css('left', -(slides.eq(0).position().left));
            }

            $('.slide-wrapper').animate(
            {
                'left' : -(slides.eq(i).position().left)
            },300, function() {
                $('.module-body').not(':first').not(':last').css('display','block');
                if (i == -1) {
                    $('.slide-wrapper').css('left', -(slides.eq(-1).position().left));
                }
            });
        });
});