Question

I am trying to create a slider in jquery and stuck in the end.

I have created a <ul> and then 4 <li> in that <ul> representing each <li> a slide. When I click on next button slide 1 is animated to slide 2. When ever I click on next button current slide is animated to next one. But how do I animate last slide to load 1st slide.

I’m changing left property’s value to animate among slides. Code is given below. Please guide me. Thanks!

        current = 0;

        current_slide=1;

        $(document).ready(function(){
            var totalSlides=$(".slider ul li").length;
            $(".slider ul").removeAttr('width');
            $(".slider ul").attr('width',951*totalSlides);

            $('#next img').click(function(){
                current_slide++;
                current -= 951;
                if(current_slide>totalSlides)
                    {
                        current=0;
                        current_slide=1;
                        $(".slider ul").css('left',0);      
                    }
                $(".slider ul").animate({"left":current+"px"}, "slow");
            });

       /* Previous button is not fully functional yet*/
            $('#prev img').click(function(){
                current_slide--;
                current += 951;
                if(current_slide==1)
                    {current=0;current_slide=totalSlides;}
                $(".slider ul").animate({"left":current+"px"}, "slow");
            });
        });

Answer 1

I’m not sure what you mean by “load 1st slide”, the code you have should appear to rewind when you get to either end of your slides. But from looking at your code, if you just remove $(".slider ul").css('left',0); it should work.

Also, in the previous code, I changed the current number from zero to 951 * totalSlides to position it in the right place – I haven’t tested it, so it might need to be 951 * (totalSlides - 1).

    current = 0;

    current_slide=1;

    $(document).ready(function(){
        var totalSlides=$(".slider ul li").length;
        $(".slider ul").removeAttr('width');
        $(".slider ul").attr('width',951*totalSlides);

        $('#next img').click(function(){
            current_slide++;
            current -= 951;
            if(current_slide>totalSlides)
                {
                    current=0;
                    current_slide=1;    
                }
            $(".slider ul").animate({"left":current+"px"}, "slow");
        });

   /* Previous button is not fully functional yet*/
        $('#prev img').click(function(){
            current_slide--;
            current += 951;
            if(current_slide==1)
                {
                    current = 951 * totalSlides;
                    current_slide = totalSlides;
                }
            $(".slider ul").animate({"left":current+"px"}, "slow");
        });
    });

Also note that there is a bug in the jQuery animate when you have left negatively positioned > 10,000 pixels – it is scheduled to be fixed in version 1.5. So if you use a lot of slides, I’d recommend switching your code to use scrollLeft

---

Update:

Well if you want an infinite slider, there are two methods you can use:

1. Stack all of your slides and hide all but the current one. When the user clicks the next or prev button, position the next slide on the appropriate side and slide the current one out of view and the new one into view – check out this jQuery Slider which uses this method.

2. The 2nd method floats all of the slides, then duplicates the first and last slide. The first slide is added after the last and the last slide duplicate is added before the first. Then when you are on the last slide and press next, the cloned slide moves into view. When the animation is complete, reposition the view to the first slide. This method is used my jQuery AnythingSlider.