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. JS——基础知识（三）

    1.select (1)它的选择事件是onchange (2)他的选项索引可以通过value获取,比tab选项卡要方便一点. 2.数组常用方法 (1)添加元素 push():可以向一个数组末尾添加一个 ...

  2. JS中判定问题

    今天项目遇到一个很奇怪的问题,具体问题不好说明简化下,有如下一个方法: function editStu(index, rowData) { if (index == "") { ...

  3. (中等) CF 576D Flights for Regular Customers (#319 Div1 D题)，矩阵快速幂。

    In the country there are exactly n cities numbered with positive integers from 1 to n. In each city ...

  4. 转 mybatis javaType与jdbcType对应

    java.sql.Types 值 Java 类型 IBM DB2 Oracle Sybase SQL Informix IBM Content Manager   BIGINT java.lang.l ...

  5. iOS开发概述UIkit动力学，讲述UIKit的Dynamic特性，UIkit动力学是UIkit框架中模拟真实世界的一些特性。

    转发:http://my.oschina.net/u/1378445/blog/335014 iOS UIKit动力学 Dynamics UIAttachmentBehavior 实现iMessage ...

  6. （二）Jquery Mobile介绍以及Jquery Mobile页面与对话框

    Jquery Mobile介绍以及Jquery Mobile页面与对话框  一. Adobe Dreamweaver CS6 环境 最新版本的cs6会支持JM的使用,有自动提示功能,很强大.安装说明地 ...

  7. log4CXX第二篇---配置文件（properties文件）详解

    一.Log4j简介 Log4j有三个主要的组件:Loggers(记录器),Appenders (输出源)和Layouts(布局).这里可简单理解为日志类别,日志要输出的地方和日志以何种形式输出.综合使 ...

  8. Extjs的架构设计思考，单页面应用 or 多页面？

    写在前面:不要认为 EXTJS 高版本就是一个界面改良,在项目中,仍然用 N 张页面,在 N 张页面部署 EXTJS ．这种方式不用多讲,效率问题大家都看得出来, EXTJS 是一个集成开发工具,注定 ...

  9. beamer中插入c代码，python代码的经验

    下面是插入的scala代码,它与python在某些语法上类似,所在在https://github.com/olivierverdier/python-latex-highlighting下载了一个py ...

  10. Object修改链表

    以前学习过链表的时候由于类型的接收不同,每次要重写链表 下面修改可用链表 class Link{ private class Node{ private Object data ; private N ...