swiper中thumbs缩略图高亮问题

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>
相关推荐
dualven_in_csdn2 小时前
搞了两天的win7批处理脚本问题
java·linux·前端
你的人类朋友2 小时前
✍️【Node.js程序员】的数据库【索引优化】指南
前端·javascript·后端
小超爱编程3 小时前
纯前端做图片压缩
开发语言·前端·javascript
应巅3 小时前
echarts 数据大屏(无UI设计 极简洁版)
前端·ui·echarts
Jimmy4 小时前
CSS 实现描边文字效果
前端·css·html
islandzzzz4 小时前
HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
Senar4 小时前
网页中如何判断用户是否处于闲置状态
前端·javascript
很甜的西瓜4 小时前
typescript软渲染实现类似canvas的2d矢量图形引擎
前端·javascript·typescript·图形渲染·canvas
Allen Bright5 小时前
【CSS-9】深入理解CSS字体图标:原理、优势与最佳实践
前端·css
阿芯爱编程6 小时前
最长和谐子序列,滑动窗口
前端·javascript·面试