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. 转 Could not create the view: An unexpected exception was thrown.问题解决

    转自:http://blog.csdn.net/shuangzixing520/article/details/35225105 今天打开Myeclipse10的时候,发现server窗口出现一堆问题 ...

  2. 位图文件（BMP）格式以及Linux下C程序实现（转）

    源:位图文件(BMP)格式以及Linux下C程序实现 说到图片,位图(Bitmap)当然是最简单的,它是Windows显示图片的基本格式,其文件扩展名为*.BMP.由于没有经过任何的压缩,故BMP图 ...

  3. iOS开发——缩放图片

    捏合图片,在原imageView中放大缩小图片. 懒得多说,直接上代码: // //  ViewController.m //  Demo-hehehe // //  Created by yyt o ...

  4. C#的逆变和协变

    out: 输出(作为结果),in:输入(作为参数) 所以如果有一个泛型参数标记为out,则代表它是用来输出的,只能作为结果返回,而如果有一个泛型参数标记为in,则代表它是用来输入的,也就是它只能作为参 ...

  5. make执行过程

    转载自 陈皓<跟我一起写 Makefile> 一般来说,最简单的就是直接在命令行下输入make命令,make命令会找当前目录的makefile来执行,一切都是自动的.但也有时你也许只想让m ...

  6. [Angular Tutorial] 14 -Animations

    在这一步中,我们将会通过在我们先前创建的模板代码中添加CSS和JavaScript动画效果来扩展我们的web应用. ·我们现在使用ngAnimate模块来允许动画效果贯穿整个应用. ·我们也依赖于自带 ...

  7. Struts2标签遍历List<Map<String,String>>

    <s:if test="resultList != null && resultList.size() > 0"> <s:iterator  ...

  8. MongoDB升级教程

    1.排序 sort()方法:其中 1 为升序排列,而-1是用于降序排列. db.col.find({},{"title":1,_id:0}).sort({"likes&q ...

  9. 轻轻的扩展了一下IEnumerable<T>

    今天用EF写东西玩,觉得IEnumerable里面除了where().select(),是不是能添加点其他方法呢. 想做就做,F12到方法定义: public static IEnumerable&l ...

  10. c#和java中的方法覆盖——virtual、override、new

    多态和覆盖 多态是面向对象编程中最为重要的概念之一,而覆盖又是体现多态最重要的方面.对于像c#和java这样的面向对象编程的语言来说,实现了在编译时只检查接口是否具备,而不需关心最终的实现,即最终的实 ...