How to add if statements to loop the images around?

Question

This code makes the 'li' move like I want to but when I get to the last 'li' and click next it keeps moving and the 'li' moves out of the users view. I want to know how to loop it so the first 'li' shows up again.

<script type="text/javascript">
    $(document).ready(function() {          
        $('#right').click(function() {
            $('.carousel-inner li').animate({
                right: '+=292px'
                }, 500);
        });
        $('#left').click(function() {
            $('.carousel-inner li').animate({
                right: '-=292px'
                }, 500);
        });     
    });
</script>

Here is a Fiddle to see an example

you will need to check the index of the currently active one and see how many on left or right, though here you are manually calculating the px. Checkout the similar answer from previous SO thread - http://stackoverflow.com/questions/17672261/cycle-active-class-with-carousel It looks more generic solution to this. — Mutant, Oct 01 '13 at 23:11

Joe · Accepted Answer · 2013-10-01T23:53:34.653

This should solve your problem:

$(document).ready(function () {
    var inner = $('.carousel-inner'),
        slides = inner.find('li'),
        width = slides.eq(0).outerWidth(true),
        max = (width * slides.length) - width;

    $('#right, #left').on('click', function () {
        var currRight = parseInt(inner.css('right'), 10), move;
        if (this.id === 'right') {
            move = currRight === max ? 0 : currRight+width;
        } else {
            move = currRight === 0 ? max : currRight-width;
        }
        inner.animate({ right: move }, 500);
    });
});

The top four lines cache elements and set up a few basic variables such as the max right value that can used and the width of the slides.

I've then combined the click events to avoid repetition. The first line of the click event defines currRight as $('.carousel-inner')'s current CSS right value as well as move which is used later on.

if (this.id === 'right'){ /* #right */ }else{ /* #left */ } checks whether the id of the clicked element is right or left. The code inside the if statement just checks to see whether the slider is at zero (the beginning) or max (the end) and then sets the move variable to the correct value.

Here it is working: http://jsfiddle.net/mFxcq/10/

Update: To make the slides move on a timer add this after the click event is attached:

function setTimer(){
    clearTimeout(window.slideTimer);
    window.slideTimer = setTimeout(function(){ $('#right').trigger('click'); }, 5000);
};

setTimer();

Then add setTimer(); right after inner.animate({ right: move }, 500); and everything will work as expected.

Here it is working: http://jsfiddle.net/mFxcq/14/

I like that the code is shorter too. I have this [Fiddle](http://jsfiddle.net/7F534/) but the code is longer and messier right? — andresr, Oct 02 '13 at 00:14
One problem though. Script does not work in Google Chrome and IE. Why could it be?? — andresr, Oct 02 '13 at 06:15
@andresr - I've just tested it in Google Chrome and it's working fine for me. Could you check the fiddle in both those browsers? If it works in them but not on your site then it might be another script on your page interfering with your code. — Joe, Oct 02 '13 at 10:57

score 1 · Answer 2 · answered Oct 01 '13 at 23:15

Add a totalItems variable which will represent the total number of items in the carousel, and a currentItem variable which will represent the number of the current item being displayed (i.e. a number from 1 to totalItems). Then, simply check if it's the last item, and if it is, move the position back to the first one. Check out the revised fiddle, where it works in both directions. Here's example JavaScript, with everything written out for clarity.

var totalItems = $('.carousel-inner li').length;
var currentItem = 1;

$('#right').click(function () {
    if (currentItem === totalItems) {
        // We've reached the end -- go to the beginning again
        $('.carousel-inner li').animate({
            right: '-=' + 292 * (totalItems-1) + 'px'
        }, 500);
        currentItem = 1;
    } else {
        $('.carousel-inner li').animate({
            right: '+=292px'
        }, 500);
        currentItem += 1;
    }
});
$('#left').click(function () {
    if (currentItem === 1) {
        // We're at the beginning -- loop back to the end
        $('.carousel-inner li').animate({
            right: '+=' + 292 * (totalItems-1) + 'px'
        }, 500);
        currentItem = totalItems;
    } else {
        $('.carousel-inner li').animate({
            right: '-=292px'
        }, 500);
        currentItem -= 1;
    }
});

Thanks. How would I set the timer so it can move on its own. I have the setTimeout but it only moves the first 2 "li". — andresr, Oct 01 '13 at 23:30
Yeah I got it thanks. Reading into .hover() clearInterval and onMouseout setInterval. Trying to learn as much as I can thanks to you guys here in stackoverflow for making it easier for me lol. — andresr, Oct 01 '13 at 23:46

score 1 · Answer 3 · answered Oct 01 '13 at 23:18

Take a look at this fiddle for a working approach. For the right click.

Basically, each time you click "Right", you'll test to compare the distance traveled by the items and compare that to the maximum distance allowed based on the total number of items.

var slideWidth = 292;    
$('#right').click(function() {
    if(parseInt($('.carousel-inner li').css('right')) == slideWidth*($('.carousel-inner li').length-1)) {
        $('.carousel-inner li').animate({
            right: '0px'
    , 500);
    }
    else {
        $('.carousel-inner li').animate({
            right: '+=' + slideWidth + 'px'
        }, 500);
    }
});

Correct. If you read my answer, I updated for 'Right' only. It would e simple for the OP to make changes 'Left'. The key is that he has a working sample of 'right' with which to work. — NakedBrunch, Oct 01 '13 at 23:22

How to add if statements to loop the images around?

3 Answers3