如何解决滑动滑块时,滑动滑块不会更新滑块的活动状态
由于某些原因,我必须使用Swiper Slider V4.5.3。我设置了一个轮播和内容滑块,但是单击轮播滑块项目时,它应该更改当前项目的活动状态,但不会。活动状态始终在第一项停止。
我尝试了多种方法来修复它,但是没有运气。即使添加slideChange事件以输出activeIndex值,它也始终显示为0。
希望任何人都能给我正确的方向。谢谢!
var Nav = new Swiper('#nav',{
spaceBetween: 0,slidesPerView: 4,watchSlidesVisibility: true,watchSlidesProgress: true
});
var NavContent = new Swiper('#content',{
spaceBetween: 20,thumbs: {
swiper: Nav
}
});
.swiper-slide-active {
color: #f00;
}
.swiper-slide {
cursor: pointer;
}
#content {
margin-top: 2em;
}
<script src="https://nybilu.com/sources/swiper.min.js"></script>
<link href="https://nybilu.com/sources/swiper.min.css" rel="stylesheet" />
<div id="nav" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Nav 1</div>
<div class="swiper-slide">Nav 2</div>
<div class="swiper-slide">Nav 3</div>
<div class="swiper-slide">Nav 4</div>
<div class="swiper-slide">Nav 5</div>
</div>
</div>
<div id="content" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Content 1</div>
<div class="swiper-slide">content 2</div>
<div class="swiper-slide">content 3</div>
<div class="swiper-slide">content 4</div>
<div class="swiper-slide">content 5</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。