swiper插件禁止鼠标拖动，且同时支持鼠标滚轮切换

最新推荐文章于 2024-02-13 20:59:53 发布

原创最新推荐文章于 2024-02-13 20:59:53 发布 · 4.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

swiper 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用Swiper库来配置滑动容器。通过添加'swiper-no-swiping'类可以禁止鼠标拖动，而在JavaScript中设置'mousewheel'选项可以启用鼠标滚轮切换，调整'sensitivity'参数可以控制滑动的灵敏度。

禁止鼠标拖动 => 在 swiper-container同级的div加上类名swiper-no-swiping

支持鼠标滚轮切换 => 案例2

案例：


1、禁止鼠标拖动
<div class="swiper-container swiper-no-swiping"></div>

2、支持鼠标滚轮切换
<script language="javascript"> 
var mySwiper = new Swiper('.swiper',{
  freeMode: true, // 自由控制
  mousewheel: { // 鼠标轮
    sensitivity : 0.1,  // 滑动灵敏度
  },
})
</script>