swiper鼠标悬浮暂停轮播
时间: 2023-07-22 07:21:55 浏览: 82
Vue封装Swiper实现图片轮播效果
你可以通过给swiper实例绑定"mouseenter"和"mouseleave"事件来实现鼠标悬浮暂停轮播的效果。代码如下:
```javascript
var mySwiper = new Swiper('.swiper-container', {
autoplay: true,
// 其他配置项
});
// 鼠标悬浮暂停轮播
mySwiper.el.onmouseover = function(){
mySwiper.autoplay.stop();
}
// 鼠标移出继续轮播
mySwiper.el.onmouseout = function(){
mySwiper.autoplay.start();
}
```
需要注意的是,swiper的`autoplay`选项需要设置为`true`,这样才能通过`autoplay.stop()`和`autoplay.start()`方法控制轮播。
阅读全文