Reputation: 93
I'm trying to create this carousel from scratch and have this for now.
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function() {
$('.carousel-inner li').animate({
right: '580px'
}, 500);
}, 3000);
$('#right').click(function() {
$('.carousel-inner li').animate({
right: '580px'
}, 500);
});
$('#left').click(function() {
$('.carousel-inner li').animate({
left: '0px'
}, 500);
});
});
</script>
It works when I click "#right" and "#left" but only once. I want to make it work that when I click "#next" again it moves again.
Here is the Fiddle
Upvotes: 1
Views: 102
Reputation: 3541
Insead of left: '0px'
use left: '-=580px'
.
And where you have right: '580px'
put left: '+=580px'
. But the user will be able to shift all your li's outside visible areas, you're gonna need some if's.
Upvotes: 2
Reputation: 6709
You should find the current position of the element using $('.carousel-inner li').offset()
and add it to the value that you wish to move the element by.
Upvotes: 0