[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>