How to set a loop in jquery?

Question

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

Serge Seredenko · Accepted Answer · 2013-10-01 22:15:25Z

2

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.

answered Oct 1, 2013 at 22:15

Serge Seredenko

3,5517 gold badges24 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

andresr Over a year ago

The left: '-=580px' does not make it go back it just keeps going forward.

andresr Over a year ago

This made it work thanks. Could you help me out get started with the if's? have no clue on where to start them. Or do I have to re-write the code? Thanks in advance.

Serge Seredenko Over a year ago

Not to think too much, I would suggest something like: var n = 1; (it's in global) everywhere, where there is left: +=580px put if (n <= 0) return; n--; in the beginning of a function. Where there's left: -=580px put if (n >= 3) return; n++; Constant 3 you may change depending on amount of blocks (I took it from the fiddle). And also you can name a counter variable properly.

Matt K · Accepted Answer · 2013-10-01 22:00:28Z

0

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.

answered Oct 1, 2013 at 22:00

Matt K

6,6883 gold badges41 silver badges64 bronze badges

Collectives™ on Stack Overflow

How to set a loop in jquery?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related