CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
David
David

Reputation: 1963

Trigger an event on specific slide - Bootstrap Carousel

Ok, so I need to trigger an event when specific (let's say number 2) slide is displayed. I've checked this function:

$('#myCarousel').bind('slide.bs.carousel', function (e) {
    console.log($(this));
});

http://jsfiddle.net/9fwuq/380/

but in the console there's no information what slide is displayed. How to get the actuall number of slide? Anyone can help?

Upvotes: 2

Views: 4937

Answers (2)

A. Wolff
A. Wolff

Reputation: 74420

You can use this event instead and following logic: {maybe better way, check the DOC}

$('#myCarousel').bind('slid', function (e) {
    var index = $(e.target).find(".active").index();
    if(index === 1) //  (2 - 1) index is zero based
        alert('slide2 displayed!');
})

;

-DEMO-

Upvotes: 5

Naeem Shaikh
Naeem Shaikh

Reputation: 15715

see this. http://jsfiddle.net/naeemshaikh27/9fwuq/382/

   var x=0;
    $('#myCarousel').bind('slide.bs.carousel', function (e) {

        if(x%3==0)
        {
            console.log('slide number');

// trigger you event here
        }
        x++;
    });

you just need to put a condition to check the number of current slide. in the example given above, i am checking each time the first slide.[assuming the count starts from 00].

Upvotes: 1

Related Questions