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>
相关推荐
@小红花10 分钟前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵13 分钟前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲28 分钟前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年31 分钟前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
IT_陈寒37 分钟前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku44 分钟前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing1 小时前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_456904271 小时前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说1 小时前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
永日456701 小时前
学习日记-HTML-day51-9.9
前端·学习·html