I've created a carousel using jQuery and I would like to add auto-play functionality to it.

Here's my existing JS:

$(document).ready(function (){
    $('#button a').click(function(){
        var integer = $(this).attr('rel');
        $('#myslide .cover').animate({left:-705*(parseInt(integer)-1)})
        $('#button a').each(function(){
            $(this).removeClass('active');
            if($(this).hasClass('button'+integer)){
                $(this).addClass('active')}
        });
    });
});​

And here's a working fiddle.

Question: I have no idea where to start with auto-play. Any suggestions?

I've created a carousel using jQuery and I would like to add auto-play functionality to it.

Here's my existing JS:

$(document).ready(function (){
    $('#button a').click(function(){
        var integer = $(this).attr('rel');
        $('#myslide .cover').animate({left:-705*(parseInt(integer)-1)})
        $('#button a').each(function(){
            $(this).removeClass('active');
            if($(this).hasClass('button'+integer)){
                $(this).addClass('active')}
        });
    });
});​

And here's a working fiddle.

Question: I have no idea where to start with auto-play. Any suggestions?

• javascript
• jquery
• carousel
• autoplay

4 Answers 4

check this out:

http://jsfiddle/gy7LE/13/

$(document).ready(function (){

    $('#button a').click(function(){
        var integer = $(this).attr('rel');
        $('#myslide .cover').animate({left:-705*(parseInt(integer)-1)})
        $('#button a').each(function(){
            $(this).removeClass('active');
            if($(this).hasClass('button'+integer)){
                $(this).addClass('active')}
        });
    });
        setInterval ( function(){Next();}, 1000 );
    });

    function Next(){
        var _next = false;
        $('#button a').each(function(){
            if(_next){
                $(this).addClass('active');
                _next = false;
            }
            else if($(this).hasClass('active')){
                _next = true;
                $(this).removeClass('active')
            }

        });  
        if(_next)
            $("#button a:eq(0)").addClass("active");

       var activeIndex = parseInt($(".active").attr("rel"));
       $('#myslide .cover').animate({left:-705*(parseInt(activeIndex))});      
    }
​

This will work. See ments in code:

var slideInterval = null;

$(document).ready(function() {
    $('#button a').click(function() {
        //Clear slide interval to allow overriding of auto slide
        if (slideInterval !== null) clearInterval(slideInterval);

        var integer = $(this).attr('rel');
        DoSlide(integer);
    });

    //Begin auto slide
    slideInterval = setInterval(DoSlide , 2000);
});

function DoSlide(integer) {
    integer = integer || parseInt($('.active').attr('rel')) + 1;

    // Reset auto slide
    if (integer == 5) integer = 1;

    $('#myslide .cover').animate({
        left: -705 * (parseInt(integer) - 1)
    });

    $('.active').removeClass('active');    
    $('a[rel="' + integer + '"]').addClass('active');
}​

Here's a working fiddle to demonstrate.

A more elegant solution

$(document).ready(function() {
  setTimeout(function () {
    $('.carousel-control.right').trigger('click');
    $('.carousel-inner').trigger('mouseenter');
    $('.carousel-inner').trigger('mouseleave');
  }, 3000); //set this time to what ever time you want it to take to start scrolling this is separate for the interval you set for the carousel though you can set it to be the same BooStrap default is 4000
});

you can try this plugin, it looks for images for you and creates auto carousel.