Zmiana class.active w carousel?

[ar4]

Witam,

Mam galerię:

https://www.koronaozon.pl/ozonator-powietrza/ozonator-a-8-alermed/

Duże zdjęcie zmienia się po kliknięciu w małe zdjęcie (po prawej stronie).
Dokładniej chodzi mi o klasę active. Ona zmienia kolor ramki na małym zdjęciu i tutaj jest wszystko ok.
A jak zrobić, gdy zmienię zdjęcie duże za pomocą strzałek (w lewo lub w prawo), aby zmieniała się klasa active w miniaturce?

[ar4]

Rozwiązałem w połowie problem, ale jeszcze nie wszystko działa tak jak powinno.

Problem jest w tym, że zdjęcie zmienia się na następne z miniaturek bez względu na to co kliknę, czyli nie działa ładowanie poprzedniego zdjęcie (po kliknięciu w miniaturki) lub przeskoki np. z 1 na 3.

Mój js to:

jQuery(function($) {
	$('#carousel-thumb').on('slide.bs.carousel', function () {
  var indicatorId = $('.carousel-indicators > li.active').data('slide-to');

  if (indicatorId === 2) {
    indicatorId = 0;
  } else { 
    indicatorId++;
  }

  $('.carousel-indicators > li.active').removeClass('active');
  $('.carousel-indicators > li[data-slide-to="' + indicatorId + '"]').addClass('active');

});
	});

Ktoś jest w stanie pomóc to naprawić?

[ar4]

Dobra, finalny kod to:

<script>
jQuery(function($) {
function initCarouselIndicators() {
    $(".carousel-indicators[data-target]").each(function (i, indicators) {
        var targetId = indicators.dataset.target;
        if (targetId != "") {
            var $carousel = $(targetId);
            $carousel.bind('slide.bs.carousel', function (e) {
                var $targetSlide = $(e.relatedTarget);
                var index = $targetSlide.index();
                $('.carousel-indicators[data-target="' + targetId + '"] li').removeClass('active')
                $('.carousel-indicators[data-target="' + targetId + '"] li:nth-child(' + (index + 1) + ')').addClass('active');
            });
        }
    });
}

initCarouselIndicators();
});
</script>

Teraz działa...