CODEWITHSUNDEEP
javascriptjquerycarouselautoplay
Lelly
Lelly

Reputation: 968

Add autoplay to this jQuery Carousel

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?

Upvotes: 1

Views: 8188

Answers (4)

Ehud Grand
Ehud Grand

Reputation: 3693

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

Upvotes: 0

Dario Novoa
Dario Novoa

Reputation: 115

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

Upvotes: 1

James Hill
James Hill

Reputation: 61793

This will work. See comments 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.

Upvotes: 1

Yorgo
Yorgo

Reputation: 2678

check this out:

http://jsfiddle.net/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))});      
    }
​

Upvotes: 2

Related Questions