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>
相关推荐
理想不理想v几秒前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云10 分钟前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:1379712058713 分钟前
web端手机录音
前端
齐 飞18 分钟前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹35 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
aPurpleBerry1 小时前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0012 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端2 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x2 小时前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint