两个导航中的两个滑块答案

【问题标题】：Two Navigation in two slider两个导航中的两个滑块
【发布时间】：2020-05-13 14:42:02
【问题描述】：

您好，我正在使用拇指滑块。画廊顶部的滑块都有导航。还有一个画廊拇指滑块导航。我无法同步运行它们。因为当我在 gallery-thumb 滑块中添加导航时，swiper-button-next 和 swiper-button-prev 类变为禁用状态。我该如何解决这个问题

-->> HTML 代码

<div class="swiper-container news-detail-slider gallery-top" >
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <a href="javascript:;">
                <picture>
                <!--[if IE 9]><video style="display: none"><![endif]-->
                <source srcset="temp/753x510.jpg" media="(min-width: 768px)">
                <!--[if IE 9]></video><![endif]-->
                <img src="temp/.jpg" data-loadmode="0" alt=""><!-- mobile -->
                </picture>
            </a>
        </div>
        <div class="swiper-slide">
            <a href="javascript:;">
                <picture>
                <!--[if IE 9]><video style="display: none"><![endif]-->
                <source srcset="temp/753x510.jpg" media="(min-width: 768px)">
                <!--[if IE 9]></video><![endif]-->
                <img src="temp/.jpg" data-loadmode="0" alt=""><!-- mobile -->
                </picture>
            </a>
        </div>
                <div class="swiper-slide">
            <a href="javascript:;">
                <picture>
                <!--[if IE 9]><video style="display: none"><![endif]-->
                <source srcset="temp/753x510.jpg" media="(min-width: 768px)">
                <!--[if IE 9]></video><![endif]-->
                <img src="temp/.jpg" data-loadmode="0" alt=""><!-- mobile -->
                </picture>
            </a>
        </div>
                <div class="swiper-slide">
            <a href="javascript:;">
                <picture>
                <!--[if IE 9]><video style="display: none"><![endif]-->
                <source srcset="temp/753x510.jpg" media="(min-width: 768px)">
                <!--[if IE 9]></video><![endif]-->
                <img src="temp/.jpg" data-loadmode="0" alt=""><!-- mobile -->
                </picture>
            </a>
        </div>
               <div class="swiper-slide">
            <a href="javascript:;">
                <picture>
                <!--[if IE 9]><video style="display: none"><![endif]-->
                <source srcset="temp/753x510.jpg" media="(min-width: 768px)">
                <!--[if IE 9]></video><![endif]-->
                <img src="temp/.jpg" data-loadmode="0" alt=""><!-- mobile -->
                </picture>
            </a>
        </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    </div>
    <div class="swiper-container gallery-thumbs"> 
        <div class="swiper-wrapper">
            <div class="swiper-slide"><span>1</span></div>
            <div class="swiper-slide"><span>2</span></div>
            <div class="swiper-slide"><span>3</span></div>
            <div class="swiper-slide"><span>4</span></div>
            <div class="swiper-slide"><span>5</span></div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

JS 代码 -->

var galleryThumbs = new Swiper('.gallery-thumbs', {
      spaceBetween: 10,
      slidesPerView: 5,
      freeMode: true,
      watchSlidesVisibility: true,
      watchSlidesProgress: true,
      navigation: {
        nextEl: '.gallery-thumbs .swiper-button-next',
        prevEl: '.gallery-thumbs .swiper-button-prev', 
    },
    });

   var galleryTop = new Swiper('.news-detail-slider', {
    slidesPerView: 1,
    navigation: {
        nextEl: '.news-detail-slider .swiper-button-next',
        prevEl: '.news-detail-slider .swiper-button-prev', 
    },
    autoplay:{
        delay: 4000,
        disableOnInteraction: !1
    },
    effect: "flipEffect",
    slidesOffsetBefore: 0,
    speed: 800,
    flipEffect: {
        rotate: 0,
        stretch: -10,
        depth: 100,
        modifier: 3,
        slideShadows: !1
    },
    spaceBetween: 0,
    thumbs: {
        swiper: galleryThumbs
    }
});

https://i.hizliresim.com/FqQ2ef.jpg

【问题讨论】：

对不起，真正的链接是------------>> i.hizliresim.com/ALSVOg.png
你可以edit你的问题。
非编程提示：询问您的设计师/项目经理/利益相关者，是否真的需要在一个网页上使用两个滑块。如果它们对整体用户体验的影响是积极的，请证明。

标签： swiper swiperjs

【解决方案1】：

刚刚想通了。

您需要将 .swiper-container 添加到所有新的 Swiper 类中

var galleryThumbs = new Swiper('.swiper-container.gallery-thumbs', {

var galleryTop = new Swiper('.swiper-container.news-detail-slider', {

然后神奇的 swiper 知道页面上有多个。

还要确保您的标记结构与演示类似

<!-- Swiper -->
<div class="swiper-container swiper-one">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 2</div>
  </div>

  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

看到swiper-wrapper在容器里面，但是导航元素在容器外面

【讨论】：