Swiper --移动端触摸滑动插件

时间 2019-11-12

标签 swiper 移动触摸滑动插件栏目无线繁體版

原文原文链接

Swiper使用方法

1.首先加载插件，须要用到的文件有swiper.min.js和swiper.min.css文件。javascript

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
    ...
    <script src="path/to/swiper.min.js"></script>
</body>
</html>

若是你的页面加载了jQuery.js或者zepto.js，你能够选择使用更轻便的swiper.jquery.min.js。css

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
    ...
    <script src="path/to/jquery.js"></script>
    <script src="path/to/swiper.jquery.min.js"></script>
</body>
</html>

2.HTML内容。html

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 若是须要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 若是须要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 若是须要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
导航等组件能够放在container以外

3.你可能想要给Swiper定义一个大小，固然不要也行。前端

.swiper-container {
    width: 600px;
    height: 300px;
}

4.初始化Swiper：最好是挨着</body>标签java

<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical',
    loop: true,
    speed:1500,
　 // 自动播放
　 autoplay:true,
　 //设置为false而且在用户互动（滑动）后不会禁用自动播放，每次互动后都会从新启动
　 autoplayDisableOnInteraction:false,

    // 若是须要分页器
    pagination: '.swiper-pagination',
    
    // 若是须要前进后退按钮
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    
    // 若是须要滚动条
    scrollbar: '.swiper-scrollbar',
  })        
  </script>
</body>

若是不能写在HTML内容的后面，则须要在页面加载完成后再初始化。jquery

<script type="text/javascript">
window.onload = function() {
  ...
}
</script>

或者这样（Jquery和Zepto）api

<script type="text/javascript">
$(document).ready(function () {
 ...
})
</script>

5.完成。恭喜你，如今你的Swiper应该已经能正常切换了，若是没有，你能够参考下这个测试包。如今开始添加各类选项和参数丰富你的Swiper，开启华丽移动前端创做之旅。浏览器

经常使用属性：app

1.initialSlide:2， // 当前索引值为第2张，从0计数
设定初始化时slide的索引。ide

2.direction : vertical ， //滑动方向为垂直
Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。

3.autoplayDisableOnInteraction : false,
用户操做swiper以后，是否禁止[autoplay]，默认为true：中止。若是设置为false，用户操做swiper以后自动切换不会中止，每次都会从新启动autoplay。

4.autoplayStopOnLast：true,
若是设置为true，当切换到最后一个slide时中止自动切换。（loop模式下无效）

5.grabCursor : true,
设置为true时，鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。（根据浏览器形状有所不一样）

6.effect:默认为"slide"（位移切换），可设置为"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）

参考资料：Swiper中文网 Swiper API Swiper配置