CODEWITHSUNDEEP
javascriptjquery
andresr
andresr

Reputation: 93

How to add if statements to loop the images around?

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

Upvotes: 1

Views: 156

Answers (3)

Joe
Joe

Reputation: 15538

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/

Upvotes: 2

NakedBrunch
NakedBrunch

Reputation: 49423

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);
    }
});

Upvotes: 1

BenjaminRH
BenjaminRH

Reputation: 12172

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;
    }
});

Upvotes: 1

Related Questions