最近要做一个效果，初步想到了使用swiper，不过貌似最后并不能完全通过swiper来实现，整整试了一天的时间都没有试出来，真是。。。压力很大，不过自己选的路，总要坚持走下去了。

Swiper(Swiper master) 是一款免费以及轻量级的移动设备触控滑块的js框架，使用硬件加速过渡（如果该设备支持的话）。主要使用与移动端的网站、网页应用程序（web apps），以及原生的应用程序（native apps）。主要是为IOS而设计的，同时，在Android、WP8系统也有着良好的用户体验。

Swiper基本结构

这样的图片相信大家应该都很清楚，做过轮播图的都熟悉的很，如下表，就不多言了

名词 翻译 描述
Swiper 滑动、切换 整个滑动对象，有时特指滑块释放后仍然正向移动直到贴合边缘的过程(过渡)
container 容器 Swiper的容器，里面包括滑动块（slides）的集合（wrapper)、分页器(pagination)、前进按钮等
wrapper 包含 触控的对象，可触摸区域，移动的块的集合，过渡时会随slide切换产生位移
slider 滑块 切换的块中的一个，可以包含文字、图片、html元素或另外一个Swiper
pagination 分页器 指示slide的数量和当前活动的slide
active 活动的，激活的 可视的(visible)slide是活动的，当可视slide不止一个时，默认最左边那个是活动的
callback 回调函数 在某些情况下触发

下面结合一个实例

和其他插件使用方法一样，我们需加载swiper.min.js和swiper.min.css文件

<!DOCTYPE html>

<html>

<head>

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

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

</head>

<body>

输入您的内容

</body>

</html>

接下来在文档部分加入我们相应的主体内容，包含容器，包含，滑块，分页器，滚动条等，在相应位置加入对应class类即可，当然我们也可以自己通过class类设置相应的属性，如swiper-container的width及height

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

然后再加上下面的代码就可以正式运行了

<script>

  var mySwiper = new Swiper ('.swiper-container', {

    direction: 'vertical',

    loop: true,

    grabCursor：true，

    // 如果需要分页器

    pagination: '.swiper-pagination',

    // 如果需要前进后退按钮

    nextButton: '.swiper-button-next',

    prevButton: '.swiper-button-prev',

    // 如果需要滚动条

    scrollbar: '.swiper-scrollbar',

  })

  </script>

这是典型的swiper类型,

我们可以通过一些参数的设置来取得更加精彩多变的效果；

如slidesPerView；设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为number或者 'auto'则自动根据slides的宽度来设定数量

effect  切换效果

fade：  淡入，淡出

cube：可以对阴影进行相关设置。

还有 coverflow：

另外，我们还可以通过设置observer来动态更新初始化swiper。如下图。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <title>Swiper demo</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->

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

    <!-- Demo styles -->

    <style>

    body {

        background: #eee;

        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

        font-size: 14px;

        color:#000;

        margin: 0;

        padding: 0;

    }

    .swiper-container {

        width: 100%;

        height: 300px;

        margin: 20px auto;

    }

    .swiper-slide {

        text-align: center;

        font-size: 18px;

        background: #fff;

        /* Center slide text vertically */

        display: -webkit-box;

        display: -ms-flexbox;

        display: -webkit-flex;

        display: flex;

        -webkit-box-pack: center;

        -ms-flex-pack: center;

        -webkit-justify-content: center;

        justify-content: center;

        -webkit-box-align: center;

        -ms-flex-align: center;

        -webkit-align-items: center;

        align-items: center;

    }

    .append-buttons {

        text-align: center;

        margin-top: 20px;

    }

    .append-buttons a {

        display: inline-block;

        border: 1px solid #007aff;

        color: #007aff;

        text-decoration: none;

        padding: 4px 10px;

        border-radius: 4px;

        margin: 0 10px;

        font-size: 13px;

    }

    </style>

</head>

<body>

    <!-- Swiper -->

    <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 class="swiper-slide">Slide 4</div>

        </div>

        <!-- Add Pagination -->

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

        <!-- Add Arrows -->

        <div class="swiper-button-next"></div>

        <div class="swiper-button-prev"></div>

    </div>

    <p class="append-buttons">

        <a href="#" class="prepend-2-slides">Prepend 2 Slides</a>

        <a href="#" class="prepend-slide">Prepend Slide</a>

        <a href="#" class="append-slide">Append Slide</a>

        <a href="#" class="append-2-slides">Append 2 Slides</a>

    </p>

    <!-- Swiper JS -->

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

    <!-- Initialize Swiper -->

    <script>

    var appendNumber = 4;

    var prependNumber = 1;

    var swiper = new Swiper('.swiper-container', {

        pagination: '.swiper-pagination',

        nextButton: '.swiper-button-next',

        prevButton: '.swiper-button-prev',

        slidesPerView: 3,

        centeredSlides: true,

        paginationClickable: true,

        spaceBetween: 30,

    });

    document.querySelector('.prepend-2-slides').addEventListener('click', function (e) {

        e.preventDefault();

        swiper.prependSlide([

            '<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>',

            '<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>'

        ]);

    });

    document.querySelector('.prepend-slide').addEventListener('click', function (e) {

        e.preventDefault();

        swiper.prependSlide('<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>');

    });

    document.querySelector('.append-slide').addEventListener('click', function (e) {

        e.preventDefault();

        swiper.appendSlide('<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>');

    });

    document.querySelector('.append-2-slides').addEventListener('click', function (e) {

        e.preventDefault();

        swiper.appendSlide([

            '<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>',

            '<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>'

        ]);

    });

    </script>

</body>

</html>

更多的属性，方法，回调函数等就不一 一列举了，http://www.swiper.com.cn/api/index.html，应有尽有

swiper初步探索的更多相关文章

  1. NoSQL初探之人人都爱Redis：（4）Redis主从复制架构初步探索

    一.主从复制架构简介 通过前面几篇的介绍中,我们都是在单机上使用Redis进行相关的实践操作,从本篇起,我们将初步探索一下Redis的集群,而集群中最经典的架构便是主从复制架构.那么,我们首先来了解一 ...

  2. 【转】 NoSQL初探之人人都爱Redis：（4）Redis主从复制架构初步探索

    一.主从复制架构简介 通过前面几篇的介绍中,我们都是在单机上使用Redis进行相关的实践操作,从本篇起,我们将初步探索一下Redis的集群,而集群中最经典的架构便是主从复制架构.那么,我们首先来了解一 ...

  3. 企查查app 初步探索

    企查查app sign算法破解初步探索 之前有说过企查查的sign的解密,但这次是企查查app的sign算法破解,目前是初步进程. 已删除!!!! 上边一些变量已经找到了,其中就有时间戳,其余两个需要 ...

  4. Springboot与ActiveMQ、Solr、Redis中分布式事物的初步探索

    Springboot与ActiveMQ.Solr.Redis中分布式事物的初步探索 解决的场景:事物中的异步问题,当要求数据库与solr服务器的最终一致时. 程序条件: 利用消息队列,当数据库添加成功 ...

  5. ASP.Net请求处理机制初步探索之旅 - Part 1 前奏

    开篇:ASP.Net是一项动态网页开发技术,在历史发展的长河中WebForm曾一时成为了ASP.Net的代名词,而ASP.Net MVC的出现让这项技术更加唤发朝气.但是,不管是ASP.Net Web ...

  6. ASP.Net请求处理机制初步探索之旅 - Part 2 核心

    开篇:上一篇我们了解了一个请求从客户端发出到服务端接收并转到ASP.Net处理入口的过程,这篇我们开始探索ASP.Net的核心处理部分,借助强大的反编译工具,我们会看到几个熟悉又陌生的名词(类):Ht ...

  7. 百度Clouda的初步探索

    最近一直比较关注百度Clouda,参加了数次百度Clouda团队举办的技术沙龙,也利用了一些时间读了开发文档,下面谈谈我对这个框架的初步理解: 1.  轻应用和Clouda的区别和联系:       ...

  8. ASP.Net请求处理机制初步探索之旅 - Part 1 前奏(转)

        在读本文之前建议先阅读IIS架构:http://www.cnblogs.com/tiantianle/p/5079932.html     不管是ASP.Net WebForm还是ASP.Ne ...

  9. openfire服务器+Spark搭建即时聊天系统 & 阿里云的初步探索

    晚上出去和洋仔吃了涮肉,喝了点啤酒,不知不觉就聊到了11点,感觉他工作状态还不错,emmm...都要加油吧.虽然没有当时去山西零下二十多度那么夸张,这几天北京的冬夜还是有点小冷的.好了进入正题: 一. ...

随机推荐

  1. ASP.NET MVC中Controller返回值类型ActionResult

    1.返回ViewResult视图结果,将视图呈现给网页 public class TestController : Controller { //必须存在Controller\Test\Index.c ...

  2. 重温WCF之一个服务实现多个契约（二）

    public class ServiceImp : IService1,IService2,IService3 { public string SayHelloA() { return "你 ...

  3. Pyqt QTabWidget 简单的计算器集合

    今天我们简单介绍下QTabWidget,然后在加入Demo计算器 首先我先讲下文件的结构: 文件分四部分, 一部分是Ui设计文件, 一部分是由Ui生成的py文件, 一部分是 计算器的逻辑文件,  最后 ...

  4. 栈与队列：refresh的停车场

    数据结构实验之队列一:排队买饭 Time Limit: 1000MS Memory limit: 65536K 题目描述 中午买饭的人特多,食堂真是太拥挤了,买个饭费劲,理工大的小孩还是很聪明的,直接 ...

  5. MySql中delimiter的作用是什么?

    这个命令与存储过程没什么关系吧.其实就是告诉mysql解释器,该段命令是否已经结束了,mysql是否可以执行了.默认情况下,delimiter是分号;.在命令行客户端中,如果有一行命令以分号结束,那么 ...

  6. 二叉搜索树的实现及指针问题的一点思考（C++）

    今天实现二叉搜索树的时候因为指针的问题卡了一上午(实在不应该...),一直segmentation fault,个人感觉还是需要记录一下的. 首先贴一下做的题的意思: 输入一系列整数,建立二叉排序数, ...

  7. html、css、javascript、JSP 、xml学习顺序应该是怎样的呢？

    html==>css==>javascript==>jsp==>xml 1.先学习基本的HTML知识,了解大部分HTML标签的作用. 2.学习CSS,熟悉如何用CSS去控制HT ...

  8. 《数据结构与算法分析》学习笔记（三）——链表ADT

    今天简单学习了下链表,待后续,会附上一些简单经典的题目的解析作为学习的巩固 首先要了解链表,链表其实就是由一个个结点构成的,然后每一个结点含有一个数据域和一个指针域,数据域用来存放数据,而指针域则用来 ...

  9. JSHint配置详解

    Also available on Github JSHint配置详解 增强参数(Enforcing Options) 本类参数设为true,JSHint会产生更多告警. bitwise 禁用位运算符 ...

  10. Adobe Flash Media Server安装

    Flash Media Server(FMS)是一个流媒体服务器 使用 实时消息传送协议(RTMP),RTMP是一种未加密的TCP/IP协议,专门设计用来高速传送音频.视频和数据信息. 3.5版32位 ...