Доброго времени суток.
Есть два свайпера, один управляет другим последством 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");
}
});