How to detect Bootstrap carousel slide change?

Question

I am using Bootstraps carousel (Bootstrap v3.3.4) together with this plugin called bootstrap-touch-carousel (https://github.com/ixisio/bootstrap-touch-carousel) to make my content swipable.

The problem I am facing is that when I use it to swipe my content it disables all clickable elements in the item (links, inputs etc.). I already tried manually reattaching the event handling by using the code:

$( "#myCarousel" ).bind( "touchend", function() { /*code for specific element*/});

But this is allot of work so I want to try to only make the captions swipable, I have placed my content outside of the swipable items and I’m trying to make the content visible with the specific item thats active. For this to work I need to detect when the user is sliding to the next or previous item. I already tried the code:

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


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

$('#myCarousel').bind('slide', function (e) {
    console.log('slide event!');
});

$('#myCarousel').bind('slid', function (e) {
    console.log('slide event!');
});

I also tried it with on instead of bind but nothing seems to work. It seems not to be able to detect the slide event.

I suspect that with the bootstrap-touch-carousel it is sliding in another way but I have no idea how to detect when the user is going to the next or previous slide. Is there a way to do this? Or maybe a way to make the carousel slide function work?

For what it is worth your first example to code helped me solve this very issue you are posting about. — Rockwell Rice

Alann Flaubert Alann Flaubert · Accepted Answer · 2019-11-13T12:53:49

Place your code within a document.ready function as per below:

$( document ).ready(function() {
    console.log( "ready!" );
    // My code goes here!
});

This will delay execution of your code to confirm that it's not run before any dependencies have loaded.

How to detect Bootstrap carousel slide change?

1 Answers