bootstrap carousel - when the carousel slides, auto update active nav-item

Question

I would need your help: here (click to see jsfiddle) I've got an auto-sliding bootstrap-carousel including a navigation to navigate manually.

I can navigate the carousel via the buttons. If I click one, its active. But if the carousel auto-slides, it does not change the active navigation-item. I tried the following code, without success. Do you know where the failure is? Thanks! :-)

$('#myCarousel').on('slid', function (e) {
  var id = $('.item.active').data('slide-number');
  id = parseInt(id);
  $('[id^=carousel-selector-]').removeClass('selected');
  $('[id=carousel-selector-'+id+']').addClass('selected');
});

Answer 1

Hi your on slide function isnt getting triggered. Thats why it did not work. heres a working fiddle https://jsfiddle.net/xgkzf25p/12/ . it worked for me after this change.

the changes made :

$('#myCarousel').on('slid', function (e) {}

changed to :

$('#myCarousel').on('slide.bs.carousel', function (e) {}