swiper使用缩略图时,无法高亮
当写好轮播图和缩略图的html结构之后,需要添加
slideThumbActiveClass: 'my-slide-thumb-active'
这表示当前轮播图激活的图片的动态样式,其次在style中去对这个class类名去写样式,这是最关键的一点。缩略图的非选中效果#thumbs img {opacity: 0.4;}
,选中后效果.my-slide-thumb-active img {opacity: 1!important;}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link rel="stylesheet" href="swiper4.4/swiper4.css">
<style>
#thumbs img {
opacity: 0.4;
}
.my-slide-thumb-active img {
opacity: 1 !important;
}
</style>
</head>
<body>
<div class="lnzp-swiper">
<div class="swiper-container lnzp-lb" id="gallery">
<div class="swiper-wrapper lnzp-box-wrapper">
<div class="swiper-slide"><img src="static/img/about/a1.png" /></div>
<div class="swiper-slide"><img src="static/img/about/a2.png" /></div>
<div class="swiper-slide"><img src="static/img/about/a3.png" /></div>
<div class="swiper-slide"><img src="static/img/about/a1.png" /></div>
<div class="swiper-slide"><img src="static/img/about/a2.png" /></div>
<div class="swiper-slide"><img src="static/img/about/a3.png" /></div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
<div class="swiper-scrollbar"></div>
</div>
<div class="swiper-container lnzp-sl" id="thumbs">
<div class="swiper-wrapper lnzp-sl-box">
<div class="swiper-slide"><img src="static/img/about/a1.png" /></div>
<div class="swiper-slide"><img src="static/img/about/a2.png" /></div>
<div class="swiper-slide"><img src="static/img/about/a3.png" /></div>
<div class="swiper-slide"><img src="static/img/about/a1.png" /></div>
<div class="swiper-slide"><img src="static/img/about/a2.png" /></div>
<div class="swiper-slide"><img src="static/img/about/a3.png" /></div>
</div>
</div>
</div>
</body>
<script src="/swiper4.4/swiper4.js"></script>
<script type="text/javascript">
var mySwiper2 = new Swiper('#gallery', {
autoplay: true, //可选选项,自动滑动
loop: true, // 开启循环
initialSlide: 1, //默认显示第二张图片索引从0开始
speed: 2000, //设置过度时间
/* grabCursor: true,//鼠标样式根据浏览器不同而定 */
autoplay: {
delay: 1000,
disableOnInteraction: false,
} /* 设置每隔3000毫秒切换 */ ,
// <!-- 分页器 -->
pagination: {
el: '.swiper-pagination',
clickable: true,
},
// 导航按钮 上一页下一页
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 滚动条
scrollbar: {
el: '.swiper-scrollbar',
hide: true,
},
thumbs: {
swiper: {
el: '#thumbs',
spaceBetween: 10,
slidesPerView: 4,
watchSlidesVisibility: true,
},
slideThumbActiveClass: 'my-slide-thumb-active',
}
})
// 获取缩略图dom元素,可加边框等效果
mySwiper2.thumbs.swiper.$el.css({
// 'border': '1px solid #00356b'
})
</script>
</html>