一、简介

①Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

②Swiper 是一款免费以及轻量级的移动设备触控滑块的框架，使用硬件加速过渡（如果该设备支持的话）。主要使用与移动端的网站、网页应用程序（web apps），以及原生的应用程序（native apps）。

③主要是为IOS而设计的，同时，在Android、WP8系统以及现代桌面浏览器也有着良好的用户体验。

二、文档

①中文网址：http://2.swiper.com.cn/

②中文网地址：http://www.swiper.com.cn/

③Swiper目前有Swiper2、Swiper3、Swiper4几个版本，每个版本的使用方法可能会有所不同，具体参照文档

三、使用方法

①加载

  • 首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。
      <link rel="stylesheet" href="path/to/swiper.min.css">

           ...

　　　　    ...

　　  <script src="path/to/swiper.min.js"></script>

　
  • 如果你的页面加载了jQuery.js或者zepto.js，你可以选择使用更轻便的swiper.jquery.min.js
　　　   ...

　　<link rel="stylesheet" href="path/to/swiper.min.css">

　　　　 ...

　　<script src="path/to/jquery.js"></script>

　　<script src="path/to/swiper.jquery.min.js"></script>

②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>

③初始化

  • 初始化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>

四、示例（轮播图）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>轮播图</title>

    <!-- 引入swiper3.0 css文件 -->

    <link rel="stylesheet" href="swiper/css/swiper.min.css">

    <style>

        *{

            margin: 0;

            padding: 0;

            box-sizing: border-box;

            -webkit-box-sizing: border-box;

        }

        ul{

            list-style: none;

        }

        a{

            text-decoration: none;

        }

        .container {

            position: relative;

            width: 750px;

            margin: 0 auto;

        }

    </style>

</head>

<body>

    <!-- 版心 -->

    <div class="container">

        <!-- 轮播图 -->

        <div class="swiper-container">

            <ul class="swiper-wrapper">

                <li class="swiper-slide"><a href="#"><img src="data:images/banner01.jpg" alt=""></a></li>

                <li class="swiper-slide"><a href="#"><img src="data:images/banner02.jpg" alt=""></a></li>

                <li class="swiper-slide"><a href="#"><img src="data:images/banner03.jpg" alt=""></a></li>

                <li class="swiper-slide"><a href="#"><img src="data:images/banner04.jpg" alt=""></a></li>

                <li class="swiper-slide"><a href="#"><img src="data:images/banner05.jpg" alt=""></a></li>

                <li class="swiper-slide"><a href="#"><img src="data:images/banner06.jpg" alt=""></a></li>

                <li class="swiper-slide"><a href="#"><img src="data:images/banner07.jpg" alt=""></a></li>

                <li class="swiper-slide"><a href="#"><img src="data:images/banner08.jpg" alt=""></a></li>

            </ul>

            <!-- 分页器 -->

            <div class="swiper-pagination"></div>

        </div>

    </div>

    <!-- 引入swiper3.0插件脚本 -->

    <script src="swiper/js/swiper.min.js"></script>

    <!-- js初始化脚本 -->

    <script>

       window.onload=function(){

            /* 轮播图 */

            new Swiper('.swiper-container',{

                autoplay:1000,

                loop:true,

                pagination:'.swiper-pagination',

                autoplayDisableOnInteraction:false

            });

       }

    </script>

</body>

</html>

swiper轮播图插件的更多相关文章

  1. Swiper轮播图

    今天咱们来说一下.Swiper轮播图. 超级简单的: 翠花,上代码:   <!DOCTYPE html>   <html lang="en">   < ...

  2. Vue轮播图插件---Vue-Awesome-Swiper

    轮播图插件 Vue-Awesome-Swiper 地址:https://github.com/surmon-china/vue-awesome-swiper 安装:npm install vue-aw ...

  3. vue轮播图插件之vue-awesome-swiper

    移动端轮播图插件,在使用iview图形界面插件中的carousel组件无法实现触摸滑动后,转而使用vue-awesome-swiper插件 1.npm安装 npm i vue-awesome-swip ...

  4. js 原生轮播图插件

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. jquery, js轮播图插件Swiper3

    轮播图插件Swiper3 HTML代码 如果只是简单的使用轮播图,直接复制我的html代码就可以. 如果想要高级一些,就自己去看文档吧 <!DOCTYPE html> <html l ...

  6. 学习笔记： js插件 —— SuperSlide 2 （轮播图插件，PC用）

    SuperSlide 2  轮播图插件,较老.但还好用. 适用于PC,是绑定到jquery上的方法: $.slide(); 如果在实际中找不到.slide方法,请检查jquery等.js文件的引入次序 ...

  7. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  8. jquery的fadeTo方法的淡入淡出轮播图插件

    由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...

  9. 第124天：移动web端-Bootstrap轮播图插件使用

    Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...

随机推荐

  1. System.Web.NullPointerException

    在.Net异步webApi中我们需要记录日志信息,需要获取客户端的ip地址,我们需要使用:HttpContext.Current.Request.ServerVariables["REMOT ...

  2. SQL Server 2012启动时提示：无效的许可证数据，需要重新安装

    因为手咸,觉得电脑没有VS 2010版本的软件,就把Microsoft Visual C++ 2010某个组件给卸载了. 然后打开Sql Server 2012,就开始报错. 重装之后,也还是报错,将 ...

  3. (转)微服务_创建一个简单的Eureka注册中心

    原文地址:https://www.cnblogs.com/lplshermie/p/9105329.html 微服务和分布式已经成了一种极其普遍的技术,为了跟上时代的步伐,最近开始着手学习Spring ...

  4. Gulp 给所有静态文件引用加版本号

    在juqery和easyui 盛行的年代许多项目采用纯静态页面去构建前端框架从而实现前后端分离的目的.项目开发周期内往往会频繁修改更新某个文件,当你将文件更新到服务器后客户端由于缓存问题而出现显示异常 ...

  5. 使用jconsole分析内存情况

    http://www.cnblogs.com/dava/p/6686436.html

  6. OpenFace 调试记录

    1.OpenFace 是 卡耐基梅陇(CMU)大学的一个图像+机器学习项目,整体程序包含:人脸发现,特征提取,特征神经网络训练,人脸识别这四部分. github   https://github.co ...

  7. x.append（）增加不同维度的区别

    b=np.array([[7,2],[2,4],[3,6],[7,8],[9,10]])print(b)print(type(b)) # 结果显示为nunmpy 数组a=[]for i in rang ...

  8. Java自学-控制流程 continue

    Java的 continue语句 继续下一次循环 示例 1 : continue 如果是双数,后面的代码不执行,直接进行下一次循环 public class HelloWorld { public s ...

  9. 【转载】C#中使用double.TryParse方法将字符串转换为double类型

    在C#编程过程中,将字符串string转换为double类型过程中,时常使用double.Parse方法,但double.Parse在无法转换的时候,会抛出程序异常,其实还有个double.TryPa ...

  10. 面试总结之Data Science

    数据科学家面试如何准备? https://mp.weixin.qq.com/s/uFJ58az8WRyaXT2nibK02g 2020 年算法 / 数据分析面试数学考点梳理 https://mp.we ...