Swipe-移动触摸滑动轮播图插件swipe.js-前端开发博客

插件特色

swipe.js是一个比较有名的触摸滑动插件，它能够处理内容滑动，支持自定义选项，你可以让它自动滚动，控制滚动间隔，返回回调函数等。经常可见使用在移动前端开发中。

使用方法

下面是一个比较简单的使用例子，添加适当的HTML代码和js代码即可。

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

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

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

设置选项

startSlide Integer (default:0) – 开始滚动的位置
speed Integer (default:300) – 动画滚动的间隔（秒数）
auto Integer – 开始自动幻灯片（以毫秒为单位幻灯片之间的时间）
continuous Boolean (default:true) – 创建一个无限的循环（当滑动到所有动画结束时是否循环滑动）
disableScroll Boolean (default:false) – 当滚动滚动条时是否停止幻灯片滚动
stopPropagation Boolean (default: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) {}
});

注意

1、原始的Swipe JS，当你用点击或者手势控制了之后，轮播图就不会自动滚动了，目前sina.cn网页也是这个设计逻辑，但是有些客户不给他自动滚动心理就不舒服，解决办法是修改原swipe.js的stop函数如下：

function stop() {
    //delay = 0;
    delay = options.auto > 0 ? options.auto : 0;
    clearTimeout(interval);
  }

下面的演示页面就是修改后的，会一直在滚动状态。（来源）

演示和下载

下载地址演示地址(手机扫描下面二维码)

swipe

关注我

我的微信公众号：前端开发博客，在后台回复以下关键字可以获取资源。

回复「小抄」，领取Vue、JavaScript 和 WebComponent 小抄 PDF
回复「Vue脑图」获取 Vue 相关脑图
回复「思维图」获取 JavaScript 相关思维图
回复「简历」获取简历制作建议
回复「简历模板」获取精选的简历模板
回复「加群」进入500人前端精英群
回复「电子书」下载我整理的大量前端资源，含面试、Vue实战项目、CSS和JavaScript电子书等。
回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识，加我微信:caibaojian89 交流

插件特色

使用方法

设置选项

实例

注意

演示和下载

相关插件推荐

关注我