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");
      }
   });
  • Вопрос задан
  • 69 просмотров
Решения вопроса 1
anov
@anov Автор вопроса
Junior coder
Вопрос решен. Вот здесь можно посмотреть, кому интересно.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы