Javascript 使用loop:true和centeredSlides:false时，Swiper滑块未按预期工作

当“循环”设置为true，而“中心幻灯片”设置为false时，Swiper滑块无法正常工作

当单击缩略图或导航箭头时，主滑块不会显示活动的缩略图，我搜索过但没有找到任何解决方案，如果有人知道如何解决此问题而不必删除任何当前选项，我将不胜感激

这是我的建议

var galleryTop=新的Swiper（“.gallery top”{
幻灯片视图：1，
循环：对，
导航：{
nextEl:“.swiper按钮下一步”，
prevEl:“.swiper按钮prev”，
},
});
var galleryThumbs=新的Swiper（“.gallery thumbs”{
方向：'垂直'，
幻灯片视图：4，
slideToClickedSlide:true，
间隔时间：10，
循环：对，
});
galleryTop.controller.control=galleryThumbs；
galleryThumbs.controller.control=galleryTop
正文{
填充：20px；
}
.图库大拇指{
浮动：左；
宽度：钙（16%-20px）；
高度：280px；
右边距：20px；
}
.图库拇指.滑动滑梯{
显示器：flex；
对齐项目：居中；
证明内容：中心；
框大小：边框框；
光标：指针；
}
.图库拇指.滑动滑梯处于活动状态{
边框：1px纯灰；
}
.图库拇指.滑动滑梯：悬停{
边框：1px纯灰；
}
.画廊顶部{
浮动：左；
宽度：84%；
高度：280px；
}
.图库顶部.滑动滑梯{
显示器：flex；
对齐项目：居中；
证明内容：中心；
框大小：边框框；
边框：1px纯灰；
}

1.
2.
3.
4.
5.
6.
1.
2.
3.
4.
5.
6.
您可以这样做

HTML

JS


尝试一下。
尝试删除
空格：10，
并将其更改为包含在幻灯片中的
填充：0 10px这将帮助swiper进行幻灯片偏移计算

 <div class="swiper-container gallery-top">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10)"></div>
        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
    </div>
    <div class="swiper-container gallery-thumbs">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/1)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/2)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/3)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/4)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/5)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/6)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/7)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/8)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/9)"></div>
            <div class="swiper-slide" style="background-image:url(http://lorempixel.com/1200/1200/nature/10)"></div>
        </div>
    </div>

html, body {
  position: relative;
  height: 100%;
}

body {
  background: #000;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper-container {
  width: 100%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  background-size: cover;
  background-position: center;
}

.gallery-top {
  height: 80%;
  width: 70%;
  margin: 0;
  margin-left: auto;
}

.gallery-thumbs {
  //height: 20%;
  box-sizing: border-box;
  padding: 10px 0;
}

.gallery-thumbs.swiper-container {
  padding: 10px;
  margin: 0px;
}

.gallery-thumbs .swiper-slide {
  height: 30%;
  opacity: 0.4;
}

.gallery-thumbs .swiper-slide-active {
  opacity: 1;
  border: 2px solid #ffa303;
}
.gallery-top{
    float:right;
    width:80%;
}


.gallery-thumbs{
    float:left;
    width:20%;
    height:80%;
}

var galleryTop = new Swiper(".gallery-top", {
  nextButton: ".swiper-button-next",
  prevButton: ".swiper-button-prev",
  spaceBetween: 10,
  loop:true,
  loopedSlides: 50
});
var galleryThumbs = new Swiper(".gallery-thumbs", {
  spaceBetween: 10,
  slidesPerView: "auto",
  touchRatio: 0.2,
  loop:true,
  slideToClickedSlide: true,
  loopedSlides: 50,
  direction:'vertical'
});
galleryTop.params.control = galleryThumbs;
galleryThumbs.params.control = galleryTop;