How to make a jQuery slider loop

I have a fairly simple slider that allows me to scroll through news items with previous and next buttons. However, I'm looking for a way to make it go back to the first slide if I click the next button after the last slide and also to go to the last slide if I click the previous button if I'm on the first slide. I basically need to make it loop. Is there a simple way to do this based on the code below?

My JS Fiddle

My HTML

<div class="slider">
    <div class="news-item item-1">News item 1</div>
    <div class="news-item item-2">News item 2</div>
    <div class="news-item item-3">News item 3</div>
    <div class="news-item item-4">News item 4</div>
</div>
<button id="prev-item">Previous</button><button id="next-item">Next</button>

Open in new window


My jQuery

$( '#prev-item' ).click( function( event ) 
        {
            $( ".news-item" ).animate({
            left: "+=500",
        }, 1000, function() {
    });
});

$( '#next-item' ).click( function( event ) 
        {
            $( ".news-item" ).animate({
                left: "-=500",
            }, 1000, function() {
        });
    });

Open in new window


My CSS

.slider
    {
        position: relative;
        clear: both;
        width: 500px;
        height: 300px;
        overflow: hidden;
    }

.slider .news-item
    {
        width: 500px;
        height: 300px;
        position: absolute;
    }

.slider .item-1
    {
        left: 0;
    }

.slider .item-2
    {
        left: 500px;
    }

.slider .item-3
    {
        left: 1000px;
    }

.slider .item-4
    {
        left: 1500px;
    }

Open in new window

LVL 1
miyahiraAsked:
Who is Participating?
 
COBOLdinosaurCommented:
Just test the value of left.  If it is 1500 the then for next to go to ) in stead of adding 500 for previous if it is 0 then you go to 1500.  You probably want to jump to the position instead of animating in those cases, because you don't rally have a loop.

Cd&
0
 
Rainer JeschorCommented:
Hi,
quick n dirty way is to check the current left postion and adjust the animation accordingly:
$( '#prev-item' ).click( function( event ) 
        {
            var animPrev = "+=500";
            if($( ".news-item" ).position().left=="0")
            {animPrev = "-=1500";}
            $( ".news-item" ).animate({
            left: animPrev,
        }, 1000, function() {
    });
});
                                    
$( '#next-item' ).click( function( event ) 
        {
            var animPos = "-=500";
            if($( ".news-item" ).position().left == "-1500")  
            {
                animPos = "+=1500";
            }
            $( ".news-item" ).animate({
                left: animPos,
            }, 1000, function() {
        });
    });

Open in new window


Fork sample based on original jsfiddle:
http://jsfiddle.net/2aycogod/

Please award points to Cd& - mine is just one possible coding way of his solution.

HTH
Rainer
0
 
miyahiraAuthor Commented:
Thanks to both of you. However, I don't understand why after several clicks in button Next or Previous, there is no slide to show, only a blank page.
0
 
miyahiraAuthor Commented:
I got it. Changed this jquery code:

 $(window).load(function() {

         var myBool = true;

         $('#prev-item').click(function() {
             if (myBool) {
                 myBool = false;
                 var myAnimation = $(".news-item");

                 var animPrev = "+=500";
                 if ($(".news-item").position().left == "0") {
                     animPrev = "-=1500";
                 }
                 myAnimation.animate({
                     left: animPrev,
                 }, 1000, function() {
                     myBool = true;
                 });
             }
         });


         $('#next-item').click(function() {
             if (myBool) {
                 myBool = false;
                 var animPos = "-=500";
                 if ($(".news-item").position().left == "-1500") {
                     animPos = "+=1500";
                 }
                 $(".news-item").animate({
                     left: animPos,
                 }, 1000, function() {
                     myBool = true;
                 });
             }
         });

 });

Open in new window



https://jsfiddle.net/2aycogod/2/
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.