swiper中thumbs缩略图高亮问题

最新推荐文章于 2024-01-30 15:09:55 发布

跟影子说丨晚安

最新推荐文章于 2024-01-30 15:09:55 发布

阅读量1.2k

点赞数 19

文章标签： javascript 前端 layui

本文链接：https://blog.csdn.net/weixin_44177602/article/details/134605901

版权

swiper使用缩略图时，无法高亮

当写好轮播图和缩略图的html结构之后，需要添加 slideThumbActiveClass: 'my-slide-thumb-active'这表示当前轮播图激活的图片的动态样式，其次在style中去对这个class类名去写样式，这是最关键的一点。缩略图的非选中效果 #thumbs img {opacity: 0.4;}，选中后效果.my-slide-thumb-active img {opacity: 1!important;}

<!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>

跟影子说丨晚安

关注

19
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
swiper中thumbs缩略图高亮问题

这表示当前轮播图激活的图片的动态样式，其次在style中去对这个class类名去写样式，这是最关键的一点。/* grabCursor: true,//鼠标样式根据浏览器不同而定 */当写好轮播图和缩略图的html结构之后，需要添加。// 获取缩略图dom元素，可加边框等效果。/* 设置每隔3000毫秒切换 *///默认显示第二张图片索引从0开始。// 导航按钮上一页下一页。-- 分页器 -->//可选选项，自动滑动。
复制链接

扫一扫