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

/

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

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/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?

• javascript
• jquery
• twitter-bootstrap

2 Answers 2

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-

see this. http://jsfiddle/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].