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,

    // 如果需要分页器

    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，开启华丽移动前端创作之旅。

*建议不使用Source Map功能，请把js压缩文件最后一行//# sourceMappingURL=maps/swiper.min.js.map 删掉。以免在某些浏览器出现以下提示：

如需要使用Source Map，演示包里面有该map文件，请放在相应的位置。关于Source Map

Swiper使用方法的更多相关文章

  1. Swiper使用方法（向前和向后按钮在swiper-container外面）

    Swiper插件的使用 1.HTML <!-- Swiper --> <section class="swipper"> <div class=&qu ...

  2. Swiper教程 —— 使用方法

    Swiper使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <h ...

  3. 轮播神器swiper插件

    Swiper中文网:http://www.swiper.com.cn/ Swiper- 是免费的,最现代化的移动触摸滑块硬件加速的转换和惊人的天然行为.它的目的是在移动网站,移动网络应用和移动本地/混 ...

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

    Swiper使用方法 1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件. <!DOCTYPE html> <html> <h ...

  5. JavaScript中非常强大的Swiper

    刚开始学习javaScript的时候,做轮播图(比如手机淘宝首页的广告位置)是使用html和css结合js的for语句.传参等知识写出来的.但学到js事件时,其实用Swiper更加好写,Swiper的 ...

  6. swiper结合ajax的轮播图

    Swiper 是什么:是纯JavaScript打造的滑动特效插件,能够实现触屏焦点图.触屏tab切换.触屏多图切换等常用效果. 开源.免费.稳定.应用广泛. 这就是swiper简单的介绍,由于是结合a ...

  7. ionic3.0--angular4.0 引入第三方插件库的方法

    ionic3.0 引入第三方插件 (swiper),方法很多,现详细说明下官方推荐(typings)做法. 1.全局安装Typings 1. npm install -g typings  2.搜索你 ...

  8. swiper 自定义分页器的使用

    网上关于swiper 自定义分页器的方法比较多,但是已经不适合使用.它的API又比较坑爹,什么都是点到为止,不说清楚.因为要做一个产品颜色切换的效果,有黑与白两种颜色,因此尝试使用Swiper的自定义 ...

  9. swiper中有视频时，滑动停止后视频停止播放

    我们经常能够看到在图片轮播中,穿插着视频的播放,如下图为淘宝的一个产品轮播图,放个视频能够让顾客对产品有个更全面的认识. 我们可以用swiper实现这个功能.用法就跟放图片一样,只是这里把图片换成视频 ...

随机推荐

  1. mybatis对java自定义注解的使用——入门篇

    最近在学习spring和ibatis框架. 以前在天猫实习时做过的一个小项目用到的mybatis,在其使用过程中,不加思索的用了比较原始的一种持久化方式: 在一个包中写一个DAO的接口,在另一个包里面 ...

  2. struts2(四) ognl表达式、值栈、actionContext之间的关系

    今天来说说ognl表达式在struts2中的运用. --wh 一.什么是Ognl? 通过百度百科查询到的解释,其中详细的说明了OGNL的作用. 下面我们就对OGNL这5个作用进行讲解 1.存取对象的任 ...

  3. SaaS模式应用之多租户系统开发（单数据库多Schema设计）

    SaaS是Software-as-a-Service(软件即服务)的简称,这边具体的解释不介绍. 多租户的系统可以应用这种模式的思想,将思想融入到系统的设计之中. 一.多租户的系统,目前在数据库存储上 ...

  4. C#_扩展方法

    这里我先引用一个实例,需求是这样:我们要将一个字符串中的字幕大小写变换,即大写变小写,小写变大写. 通常,我们首先会考虑在当前类中写一个方法,将字符串传进去,然后返回变换后的字符串.这样写当然不会错, ...

  5. celldb.cc

    欢迎光临 celldb.cc 的新博客 老博客的内容就不搬迁了, 工作量太大. http://celldb.cc 主要功能: 1 话单基站轨迹分析 2 基站查询 3 邻近基站查询 4 CDMA根据城市 ...

  6. ASP.NET Web服务(ASMX)学习和代理生成

    第一步:按照http://www.c-sharpcorner.com/article/getting-started-with-asp-net-web-services-part-one/ 建立项目和 ...

  7. js简单省级联动菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 原生JS实现弹出窗口的拖拽

    上一篇说了一下弹出窗口功能的实现思路,一般情况下紧接着就会需要做到弹窗的移动,当然现在有很插件.库比如hammer可以使用,效率也非常好.但我觉得还是有必要了解一下原生JS的实现思路及方式,如下: 思 ...

  9. 【转】如何实现Flex页面跳转

    其实对于这个题目是不恰当的,因为flex中是没有页面这个概念的,页面在flex里面其实就是一个个的Canvas,vbox,hbox等等之类的东西,看到的不同页面的切换,就是这些元素一层层的堆积,或者替 ...

  10. 老李秘技：loadrunner回放脚本错误提示Error: "HTTP Status-Code 500"

    老李秘技:loadrunner回放脚本错误提示Error: "HTTP Status-Code 500"   当脚本回放的时候出现错误提示Error: "HTTP Sta ...