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
My jQuery
My CSS
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>
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() {
});
});
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;
}
jQueryHTMLCSS
Last Comment
miyahira
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
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.
ASKER
I got it. Changed this jquery code:
https://jsfiddle.net/2aycogod/2/
$(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;
});
}
});
});
https://jsfiddle.net/2aycogod/2/