swiper禁用滑动效果

swiper一般作为轮播图插件使用,滑动效果是最基础的,但如果不想要滑动效果呢?我就要突变,不要动效,哈哈哈,看了下文档,好像没有禁用动效的选项。
但,还是被我发现了变通的方法,把speed选项改为0,也就是过渡时间改成0,就是突变了,哈哈哈哈。

new Swiper('.swiper-container', {
	speed: 0,
	allowTouchMove: false, // 这是用来禁止鼠标/手指拖动的,既然动效都不要了,那拖动可能也不要了
});
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你想在 PC 端禁用 Swiper滑动切换效果,可以通过设置 `allowTouchMove` 属性为 `false` 来实现。但是,如果你在 PC 端使用鼠标滚轮来滚动页面,Swiper 可能会与页面滚动产生冲突,导致禁用不生效。这时,你可以通过监听鼠标滚轮事件,来手动禁止滚轮滚动时的 Swiper 操作。具体实现方式可以参考以下代码: ```js var swiper1 = new Swiper(swiperId, { allowTouchMove: false, // 其他 Swiper 选项 // ... }); var container = document.querySelector(swiperId); container.addEventListener('wheel', function (event) { if (swiper1.mousewheel.enabled) { swiper1.mousewheel.disable(); container.scrollTop += event.deltaY; setTimeout(function () { swiper1.mousewheel.enable(); }, 500); event.preventDefault(); } }); ``` 以上代码中,我们通过监听容器元素的 `wheel` 事件来禁止鼠标滚轮滚动时的 Swiper 操作。在事件处理函数中,我们首先判断鼠标滚轮事件是否已启用了 Swiper 的 mousewheel 模块,如果是,则通过 `disable` 方法禁用该模块。然后,我们手动调整容器元素的 `scrollTop` 值,来实现滚动效果。最后,我们通过 `setTimeout` 方法延迟一段时间后,再通过 `enable` 方法启用 mousewheel 模块,以恢复 Swiper滑动切换效果。需要注意的是,由于我们禁用了鼠标滚轮事件的默认行为,所以需要在事件处理函数中显式地调用 `event.preventDefault()` 方法来阻止默认行为的发生。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值