anov
@anov
Junior coder

Как центрировать новый активный слайд?

Доброго времени суток.

Есть два свайпера, один управляет другим последством thumbs. Thumbs-слайдов больше.
По событию "slideChangeTransitionStart" удаляю со всех thumbs классы -active, -prev, -next и вешаю на те , которые мне необходимы. В параметрах прописал centeredSlides: true и controller by container.
Я не могу отцентрировать новый активный слайд. Отслеживание по другим событиям не подходит. Мне нужно обновить параметры слайдера после назначения нового активного thumb'а, кто-нибудь знает как это можно сделать? или может есть другой путь? Буду благодарен за любую помощь.

historySlider.on("slideChangeTransitionStart", function () {

   // Get the active-slide when slide is changing
   let activeHistoryImage = document.querySelector(".history__slide.swiper-slide-active");

   // Get the active-slide data-slide attribute
   let activeHistoryImageAttr = activeHistoryImage.getAttribute("data-slide");

   let historyTimestamp = document.querySelectorAll(".history__stamp");

   // Get the cycle from timeline row
   historyTimestamp.forEach(item => {
      if (item.dataset.target == activeHistoryImageAttr) {
         let activeTimestamp = item;

         // Remove from any timeline slide active class
         historyTimestamp.forEach(elem => {
            elem.classList.remove("swiper-slide-active");
         });

         // Remove from any timeline slide prev class
         historyTimestamp.forEach(elem => {
            elem.classList.remove("swiper-slide-prev");
         });

         // Remove from any timeline slide next class
         historyTimestamp.forEach(elem => {
            elem.classList.remove("swiper-slide-next");
         });

         // Add active class to activeTimestamp, previous to previous and next to next
         activeTimestamp.classList.add("swiper-slide-active");
         activeTimestamp.previousElementSibling.classList.add("swiper-slide-prev");
         activeTimestamp.nextElementSibling.classList.add("swiper-slide-next");
      }
   });
  • Вопрос задан
  • 534 просмотра
Решения вопроса 1
anov
@anov Автор вопроса
Junior coder
Вопрос решен. Вот здесь можно посмотреть, кому интересно.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы