Как можно сделать подобный слайдер?

Question

[ssawyer]

Пробую таким образом - совместить 2 слайдера swiper, но нормально не выходит.. последний слайд активным при инициализации не ставится (ставится только по событию click(), но в таком случае не добавляется класс активного слайда.

document.addEventListener("DOMContentLoaded", () => {
    const lastSlideIndex = document.querySelectorAll(".historical__nav .swiper-slide").length - 1;

    const sliderYears = new Swiper(".historical__nav .swiper-container", {
        slidesPerView: 6,
        spaceBetween: 57,
        initialSlide: 6,
        navigation: {
            nextEl: ".historical__nav-button--next",
            prevEl: ".historical__nav-button--prev",
        },
    });
    const sliderContent = new Swiper(".historical__content", {
        slidesPerView: 1,
        allowTouchMove: false, 
        initialSlide: 6,
    });
    sliderYears.on("slideChange", function () {
        sliderContent.slideTo(sliderYears.activeIndex);
    });

    sliderContent.on("slideChange", function () {
        sliderYears.slideTo(sliderContent.activeIndex);
    });
    sliderYears.slides.forEach((slide, index) => {
        slide.addEventListener("click", () => {
            sliderYears.slideTo(index); 
            sliderContent.slideTo(index); 
        });
    });

    sliderContent.update();

    if (lastSlideIndex) {
      // работает, но класс активного слайда не добавляется
        lastSlideIndex.click();
    }
    sliderYears.update();
    sliderContent.update();

    // Перемещаемся к последнему слайду после полной инициализации
  // Не работает
    sliderYears.slideTo(lastSlideIndex);
    sliderContent.slideTo(lastSlideIndex);
});

Comments

[FeST1VaL]

а зачем 2 слайдера? если года это просто точки от одного слайдера?

Я бы вообще не использовал слайдеры, а просто сделал бы как вкладки условные... скрытие и показ контента по клику, в крайнем случае добавил анимацию перехода между ними.

Сделайте песочницу

[ssawyer]

FeST1VaL, показалось проще. помогло свойство thumbs:

const lastSlideIndex = document.querySelectorAll(".historical__nav .swiper-slide").length - 1;

    const sliderYears = new Swiper(".historical__nav .swiper-container", {
        slidesPerView: 6,
        spaceBetween: 57,
        draggable: true,
        navigation: {
            nextEl: ".historical__nav-button--next",
            prevEl: ".historical__nav-button--prev",
        },
    });
    const sliderContent = new Swiper(".historical__content", {
        slidesPerView: 1,
        allowTouchMove: false,
        initialSlide: lastSlideIndex,
        thumbs: {
            swiper: sliderYears,
        },
    });