Swipe.js插件介绍

最新推荐文章于 2024-05-15 10:09:15 发布

WeLoveSunFlower

最新推荐文章于 2024-05-15 10:09:15 发布

阅读量1.6k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/WeLoveSunFlower/article/details/37593921

版权

前端专栏收录该内容

38 篇文章

订阅专栏

Swipe.js是一个3.7kb的轻量级移动滑块类库，提供精确触摸移动、响应式设计和类似原生操作体验。它不依赖任何javascript框架，具有高度定制性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Swipe.js是一个轻量级（仅3.7kb）的移动滑块类库

支持精确地触摸移动，支持响应式页面，并能提供类似原生程序的操作体验，如智能缩放幻灯片大小等。

不依赖于任何javascript框架，定制性也比较高。

官方网站：http://swipejs.com/

git下载：https://github.com/thebird/Swipe

用法

Swipe只需添加很简单的一段代码即可

<div id='slider' class='swipe'>
  <div class='swipe-wrap'>
    <div class='wrap'></div>
    <div class='wrap'></div>
    <div class='wrap'></div>
  </div>
</div>

以上代码是最初需要的结构--一系列元素包裹在两个容器中，你可以在wrap中添加任何你想要的内容。最外面的div（即slide）需要设置一下的js函数：

window.mySwipe = Swipe(document.getElementById('slider'));

Swipe需要往样式表中添加一些代码

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

配置选项Swipe可以扩展可选参数-通过设置对象的键值对:

startSlide Integer (默认:0) - 开始位置
speed Integer (默认:300) - 切换，单位毫秒.
auto Integer - 自动滑动 (time in milliseconds between slides)
continuous Boolean (默认:true) -是否可以循环播放（注：我设置为false好像也是循环的）
disableScroll Boolean (默认:false) - 禁止触摸滑动
stopPropagation Boolean (默认:false) - 禁止事件传播
callback Function - 回调函数，可以获取到滑动中图片的索引.切换时触发
transitionEnd Function - 切换结束时执行

举例

window.mySwipe = new Swipe(document.getElementById('slider'), {
  startSlide: 2,
  speed: 400,
  auto: 3000,
  continuous: true,
  disableScroll: false,
  stopPropagation: false,
  callback: function(index, elem) {},
  transitionEnd: function(index, elem) {}
});

Swipe APIswipe扩展了几个函数，以便于更好的通过脚本来控制滑动。

prev() 上一页

next() 下一页

getPos() 返回当前div（class='wrap'的div）的索引

getNumSlides() 返回滑块总数（貌似无效）

slide(index, duration) 设置滑到的索引 (duration: 转化的速度，单位毫秒)

demo

其他移动端scroll组件介绍