Swiper JS - 2 слайдера на странице

[samdo]

Коллеги, приветствую! Подскажите по проблеме, что-то я в тупике( У меня есть два слайдера на одной странице. Первый работает нормально, а вот на втором не работают миниатюры, они не двигаются вместе с основным слайдером. К тому же, на этом же втором слайдере не работает прокрутка и стрелки навигации.

<script>
    var swiper = new Swiper(".mySwiper", {
      spaceBetween: 10,
      slidesPerView: 4,
      freeMode: true,
      watchSlidesProgress: true,
    });
    var swiper2 = new Swiper(".mySwiper2", {
      spaceBetween: 10,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      thumbs: {
        swiper: swiper,
      },
    });
        var swiper3 = new Swiper(".mySwiper3", {
      spaceBetween: 10,
      slidesPerView: 4,
      freeMode: true,
      watchSlidesProgress: true,
    });
    var swiper4 = new Swiper(".mySwiper4", {
      spaceBetween: 10,
      navigation: {
        nextEl: ".sec-slider-next",
        prevEl: ".sec-slider-prev",
      },
      thumbs: {
        swiper: swiper3,
      },
    });
</script>

[рони]

samdo,
укажите классы стрелок более подробно, в во всех nextEl и prevEl через родителя типа
nextEl: ".mySwiper4 .sec-slider-next", или как там у вас.

[samdo]

samdo,
укажите классы стрелок более подробно, в во всех nextEl и prevEl через родителя типа
nextEl: ".mySwiper4 .sec-slider-next", или как там у вас.

Не помогло. У mySwiper4 не только стрелки не реагируют, он мышкой тоже не прокручивается. В консоли вот такая ошибка

[рони]

samdo,
без макета можно только гадать

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

[samdo]

Не удается воспроизвести в html run, но, я думаю, что без этого все понятно. Следующий слайдер не работает из-за того, что он скрыт изначально, поэтому не может нормально инициализироваться. Нашел одно решение (https://stackoverflow.com/questions/...swiper-in-tabs), но оно не подходит, т.к. предназначены для табов, которые содержат один слайдер, а у нас их 2 (осноыной и миниатюры).

<div id="tabs-section" class="tabs"" />
    <ul class="tab-head">
        <li>
            <a href="#tab-1" class="tab-link active">
                Tab 1
            </a>
        </li>
        <li>
            <a href="#tab-2" class="tab-link">
                Tab 2
            </a>
        </li>
    </ul>
    <section id="tab-1" class="tab-body entry-content active active-content">
        <div>
            <div class="swiper mySwiper2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Slide 1</div>
                    <div class="swiper-slide">Slide 2</div>
                    <div class="swiper-slide">Slide 3</div>
                    <div class="swiper-slide">Slide 4</div>
                    <div class="swiper-slide">Slide 5</div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
            <div thumbsSlider="" class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Thumb 1</div>
                    <div class="swiper-slide">Thumb 2</div>
                    <div class="swiper-slide">Thumb 3</div>
                    <div class="swiper-slide">Thumb 4</div>
                    <div class="swiper-slide">Thumb 5</div>
                </div>
            </div>
        </div>
        <div>
    </section>
    <section id="tab-2" class="tab-body entry-content">
        <div>
            <div class="swiper mySwiper4">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Slide 11</div>
                    <div class="swiper-slide">Slide 21</div>
                    <div class="swiper-slide">Slide 31</div>
                    <div class="swiper-slide">Slide 41</div>
                    <div class="swiper-slide">Slide 51</div>
                </div>
                <div class="swiper-button-next sec-slider-next"></div>
                <div class="swiper-button-prev sec-slider-prev"></div>
            </div>
            <div thumbsSlider="" class="swiper mySwiper3">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Thumb 11</div>
                    <div class="swiper-slide">Thumb 21</div>
                    <div class="swiper-slide">Thumb 31</div>
                    <div class="swiper-slide">Thumb 41</div>
                    <div class="swiper-slide">Thumb 51</div>
                </div>
            </div>
        </div>
        <div>
    </section>
</div>

<script>
    var swiper = new Swiper(".mySwiper", {
      spaceBetween: 10,
      slidesPerView: 4,
      freeMode: true,
      watchSlidesProgress: true,
    });
    var swiper2 = new Swiper(".mySwiper2", {
      spaceBetween: 10,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      thumbs: {
        swiper: swiper,
      },
    });
	var swiper3 = new Swiper(".mySwiper3", {
      spaceBetween: 10,
      slidesPerView: 4,
      freeMode: true,
      watchSlidesProgress: true,
    });
    var swiper4 = new Swiper(".mySwiper4", {
      spaceBetween: 10,
      navigation: {
        nextEl: ".sec-slider-next",
        prevEl: ".sec-slider-prev",
      },
      thumbs: {
        swiper: swiper3,
      },
    });
</script>

[рони]

samdo,

по load цикл по tab-body -- добавить active -- init swiper - удалить active
после цикла добавить active первой секции - всё

[samdo]

samdo,

по load цикл по tab-body -- добавить active -- init swiper - удалить active
после цикла добавить active первой секции - всё

Звучит не плохо) если б я только знал куда и как это в моем коде добавить

[рони]

samdo,
вместо всего вашего кода, поставьте это

$(window).on("load", function() {
            $(".tab-body").each(function(i, tab) {
                $(tab).addClass("active");
                let swiper = new Swiper($(".swiper:eq(1)", tab), {
                    spaceBetween: 10,
                    slidesPerView: 4,
                    freeMode: true,
                    watchSlidesProgress: true,
                });
                let swiper2 = new Swiper($(".swiper:eq(0)", tab), {
                    spaceBetween: 10,
                    navigation: {
                        nextEl: $(".swiper-button-next", tab),
                        prevEl: $(".swiper-button-prev", tab),
                    },
                    thumbs: {
                        swiper: swiper,
                    },
                });
                $(tab).removeClass("active")
            }).eq(0).addClass("active");
        })

[рони]

samdo,
обновите и скопируйте снова

[samdo]

samdo,
обновите и скопируйте снова

Не, не сработало.