Swiper使用方法

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

<!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。

<!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内容。

<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>标签

<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内容的后面，则需要在页面加载完成后再初始化。

<script type="text/javascript">

window.onload = function() {

  ...

}

</script>

或者这样（Jquery和Zepto）

<script type="text/javascript">

$(document).ready(function () {

 ...

})

</script>

5.完成。恭喜你，现在你的Swiper应该已经能正常切换了，如果没有，你可以参考下这个测试包。现在开始添加各种选项和参数丰富你的Swiper，开启华丽移动前端创作之旅。

常用属性：

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

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配置

Swiper --移动端触摸滑动插件的更多相关文章

  1. swiper嵌套小demo(移动端触摸滑动插件)

    swiper(移动端触摸滑动插件) tip:自己敲得Swiper 的小demo,可以复制粘贴看看效果哦. swiper的js包css包下链接地址 :  https://github.com/Clear ...

  2. 移动端触摸滑动插件Swiper

    移动端触摸滑动插件Swiper 04/02/2015 一.了解Swiper 目前移动端项目一般都需要具有触屏焦点图的效果,如果你也需要实现这一功能的话,Swiper是一个不错的选择. 1.他不需要加载 ...

  3. 移动端触摸滑动插件Swiper使用指南

    Swiper是一款开源.免费.功能十分强大的移动端内容触摸滑动插件,目前的最新版本是Swiper4.Swiper主要面向的是手机.平板电脑等移动设备,帮助开发者轻松实现触屏焦点图.触屏Tab切换.触屏 ...

  4. Swipe-移动端触摸滑动插件swipe.js

    原文链接:http://caibaojian.com/swipe.html 插件特色 viaswipe.JS是一个比较有名的触摸滑动插件,它能够处理内容滑动,支持自定义选项,你可以让它自动滚动,控制滚 ...

  5. swiper.js 移动端触摸滑动插件

    API链接: http://www.swiper.com.cn/api/start/2014/1218/140.html <body> <div class="swiper ...

  6. 仿移动端触摸滑动插件swiper,的简单实现

    ​ /** * @author lyj * @Date 2016-02-04 * @Method 滑动方法 针对一个大容器内部的容器做滑动封装 * @param * args args.swipeDo ...

  7. JS封装移动端触摸滑动插件应用于导航banner【精装版】

    自己封装了一个小插件,一个小尝试. 可用于类似于京东导航等效果,效果多样化,很方便. 欢迎大家提点意见. mrChenSwiper(  {parent, child, type, parentN, c ...

  8. 最好的移动触摸滑动插件：Swiper

    最近在使用的一个移动触摸滑动插件Swiper,功能很强大,跟之前的那个swipe.JS相比,同时支持在PC端滑动,支持上下方向滑动,支持多张图片滑动,支持多屏滑动,凡是你想得到的几乎都可以实现.最近作 ...

  9. 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈

    自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...

随机推荐

  1. 解决airserver在Windows下安装失败的问题

    airserver 可以将iphone 实时投影到mac 和 pc.在mac上安装非常简单.但是在Windows上安装时会有很多问题.之前我电脑安装很快就完成了(因为我之前已经在不知情的前提先事先装过 ...

  2. centos 7用ss命令来查看端口占用和对应进程

    mysqld进程在监听4567端口,进程id是2593:# ss -lnp|grep 4567tcp    LISTEN     0      128                    *:456 ...

  3. Linux系统开机启动流程

    (来源学习Linux时,自己做的笔记) Linux系统有7个运行级别(runlevel)运行级别0:系统停机状态,系统默认运行级别不能设为0,否则不能正常启动运行级别1:单用户工作状态,root权限, ...

  4. div无法跟随内容的增加而拉伸

    有时将 div 的 height 设置为 auto 后,仍然无法让 div 自动拉伸,发现是 display:block 的原因,将其设置为 inline-block 即可.

  5. salt自动化部署

    1. 到编译机器编译 /export/Deploy/vm-agent 执行脚本 ./vm-agent.sh develop -alpha 2.检查rpm包是否打包成功 http://172.18.13 ...

  6. NSDate常用代码范例

    NSDate常用代码范例 NSDate类用于保存时间值,同时提供了一些方法来处理一些基于秒级别时差(Time Interval)运算和日期之间的早晚比较等. 1. 创建或初始化可用以下方法 用于创建N ...

  7. android UI线程安全问题

    在Android的子线程去更新UI的内容,会导致不确定的异常. 因为Android有个模式是,单一线程模型:Android UI工具箱(toolkit)不是一个线程安全的,并且它总是被放在主线程上操作 ...

  8. 安卓 SQLite error：SQLite database locked exception while compling : PRAGMA journal_mode .....

    项目中频繁的切换Tab键,会频繁地从数据库读取数据,这是报出这样的错误: 解决方法是在国外的某论坛找到的 : 在插入数据的时候,首先: SQLiteDatabase db = SQLiteDataba ...

  9. python 开发者 精品

    当 Python 和 R 遇上北京二手房 http://mp.weixin.qq.com/s?timestamp=1473262097&src=3&ver=1&signatur ...

  10. System.Web.UI.WebControls的Web服务器控件

    calendar[英][ˈkælɪndə(r)][美][ˈkæləndɚ]n.日历; 历法; 日程表; (一年之中的)重大事件(或重要日期)一览表; vt.把…记入日程表中; 把…列入表中; 为(文件 ...