swiper 增加一个鼠标移入分页器的小点后就切换展示图片
Posted TMM-eng
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了swiper 增加一个鼠标移入分页器的小点后就切换展示图片相关的知识,希望对你有一定的参考价值。
本人处理的方法是:
1、头部加载插件: <link rel="stylesheet" href="swiper.min.css"> <script src="swiper.min.js"></script> 2、html部分: <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> </div> 3、js部分: $(document).ready(function() { var mySwiper = new Swiper(‘.swiper-container‘, { loop:true, autoplay:true, pagination: { el: ‘.swiper-pagination‘, clickable: true, } }); //此方法为模拟的,hover到分页器的小圆点后自动触发其本身的click事件 $(".swiper-pagination-bullet").hover(function() { $(this).click(); //鼠标划上去之后,自动触发点击事件来模仿鼠标划上去的事件 },function() { mySwiper.autoplay.start(); //鼠标移出之后,自动轮播开启 }) })
大神绕道,不喜勿喷。
以上是关于swiper 增加一个鼠标移入分页器的小点后就切换展示图片的主要内容,如果未能解决你的问题,请参考以下文章