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>
相关推荐
吃杠碰小鸡42 分钟前
commitlint校验git提交信息
前端
虾球xz1 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇1 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒1 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员2 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐2 小时前
前端图像处理(一)
前端
程序猿阿伟2 小时前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒2 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪2 小时前
AJAX的基本使用
前端·javascript·ajax
力透键背2 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript