Zaloguj się, aby obserwować  
ar4

Zmiana class.active w carousel?

Polecane posty

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?


DAMTOX.PL - pozycjonowanie stron!

StolicaZdrowia.pl - Portal o zdrowiu

Polecam hosting (bez reflinka) - whosting.pl

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

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


DAMTOX.PL - pozycjonowanie stron!

StolicaZdrowia.pl - Portal o zdrowiu

Polecam hosting (bez reflinka) - whosting.pl

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

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...


DAMTOX.PL - pozycjonowanie stron!

StolicaZdrowia.pl - Portal o zdrowiu

Polecam hosting (bez reflinka) - whosting.pl

Udostępnij ten post


Link to postu
Udostępnij na innych stronach

Bądź aktywny! Zaloguj się lub utwórz konto

Tylko zarejestrowani użytkownicy mogą komentować zawartość tej strony

Utwórz konto

Zarejestruj nowe konto, to proste!

Zarejestruj nowe konto

Zaloguj się

Posiadasz własne konto? Użyj go!

Zaloguj się
Zaloguj się, aby obserwować  

  • Kto przegląda   0 użytkowników

    Brak zalogowanych użytkowników przeglądających tę stronę.