Link to home
Start Free TrialLog in
Avatar of miyahira
miyahiraFlag for Peru

asked on

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

ASKER CERTIFIED SOLUTION
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Avatar of Rainer Jeschor
Rainer Jeschor
Flag of Germany image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of miyahira

ASKER

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.
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/