Синхронизация двух слайдеров Bootstrap

Есть 2 стандартные carousel от bootstrap на одной странице, нужно, чтобы на них всегда были изображения с одинаковым индексом.

В интернете находил такой пример:

Javascript Выделить код

$('.carousel-sync').on('slide.bs.carousel', function(ev) {
    var dir = ev.direction == 'right' ? 'prev' : 'next';
  $('.carousel-sync').not('.sliding').addClass('sliding').carousel(dir);
});
$('.carousel-sync').on('slid.bs.carousel', function(ev) {
  $('.carousel-sync').removeClass('sliding');
});

Работает нормально, но только тогда, когда пользуешься обычными стрелочками для смены слайдов, когда пытаешься через carousel-indicator покрутить, то десинхрон происходит.

Далее пытался так мотать:

$('#carousel-a').on('slide.bs.carousel', function () {
  var carouselData = $(this).data('bs.carousel');
  var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.gnida.active'));
  $('#carousel-b').carousel(currentIndex);
})

Но получается, что первый слайдер мотается, а второй меняет индекс только при последующем нажатии, то есть опять не работает.

Подскажите, пожалуйста, как это реализовать можно. Спасибо