andresr
andresr

Reputation: 93

How to set a loop in jquery?

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

Answers (2)

Serge Seredenko
Serge Seredenko

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

Matt K
Matt K

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

Related Questions