swiper初步探索

最近要做一个效果，初步想到了使用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，应有尽有

时间： 2024-10-12 16:30:58

swiper初步探索的相关文章

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

一.主从复制架构简介 通过前面几篇的介绍中,我们都是在单机上使用Redis进行相关的实践操作,从本篇起,我们将初步探索一下Redis的集群,而集群中最经典的架构便是主从复制架构.那么,我们首先来了解一下神马是主从复制架构? 1.1 源于关系数据库的读写分离 随着网站业务的不断发展,用户量的不断增加,数据量也成倍的增长,数据库的访问量也呈线性地增长.特别是在用户访问高峰期间,并发访问量突然增大,数据库的负载压力也会增大,如果架构方案不够健壮,那么数据库服务器很有可能在高并发访问负载压力下宕机,造成

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

一.主从复制架构简介 通过前面几篇的介绍中,我们都是在单机上使用Redis进行相关的实践操作,从本篇起,我们将初步探索一下Redis的集群,而集群中最经典的架构便是主从复制架构.那么,我们首先来了解一下神马是主从复制架构? 1.1 源于关系数据库的读写分离 随着网站业务的不断发展,用户量的不断增加,数据量也成倍的增长,数据库的访问量也呈线性地增长.特别是在用户访问高峰期间,并发访问量突然增大,数据库的负载压力也会增大,如果架构方案不够健壮,那么数据库服务器很有可能在高并发访问负载压力下宕机,造成

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

  上一篇我们了解了一个请求从客户端发出到服务端接收并转到ASP.Net处理入口的过程,这篇我们开始探索ASP.Net的核心处理部分,借助强大的反编译工具,我们会看到几个熟悉又陌生的名词(类):HttpWorkerRequest.HttpRuntime.HttpContext.HttpApplication等. 一.第一个入口:ISAPIRuntme.ProcessRequest()    ISAPIRuntime是进入NET托管环境的入口,在其PR方法中通过一个ecb句柄指向了当前请求报文体的

three的初步探索之表象篇

首先three.js是啥?用来干啥的?首先在谈这个之前,先说下canvas,canvas是h5新生的一个功能,可以用来画图,表达许多更绚丽的特效,然后canvas目前有个软当,就是只能2d,不支持三维世界的,那么如果我们要在canvas做出3d效果咋办,这时候需要一个东西,叫WebGL,这玩意是啥?百度定义:WebGL是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可

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

   不管是ASP.Net WebForm还是ASP.Net MVC在请求处理机制上大部分都是相同的,只是在请求处理管道上的处理事件做了不同的操作.因此,本文标题不区分ASP.Net WebForm和ASP.Net MVC,但在后续的介绍中会区分开来介绍.此外,本文以IIS经典模式为主,不讨论集成模式(IIS7后加入了集成模式,不用加载外部的aspnet_isapi.dll组件). 一.当一个请求到来时HTTP.sys先进行了基本处理,然后转发给IIS的工作者进程. 主要看工作者进程做了什么.

侦测欺诈交易-数据初步探索

# 4.2.1 加载数据至R library(DMwR) ## Loading required package: lattice ## Loading required package: grid data(sales) head(sales) ##   ID Prod Quant   Val Insp ## 1 v1   p1   182  1665 unkn ## 2 v2   p1  3072  8780 unkn ## 3 v3   p1 20393 76990 unkn ## 4 v

由枚举模块到ring0内存结构的初步探索

是由获得进程模块而引发的一系列的问题,首先,在ring3层下枚举进程模块有ToolHelp,Psapi,还可以通过在ntdll中获得ZwQuerySystemInformation的函数地址来枚举,其中ZwQueryInformationProcess相当于是调用系统服务函数,其内部实现就是遍历PEB中的Moudle链表, kd> dt _PEB +0x00c Ldr              : Ptr32 _PEB_LDR_DATA kd> dt _PEB_LDR_DATA nt!_PEB

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

开篇:上一篇我们了解了一个请求从客户端发出到服务端接收并转到ASP.Net处理入口的过程,这篇我们开始探索ASP.Net的核心处理部分,借助强大的反编译工具,我们会看到几个熟悉又陌生的名词(类):HttpRuntime.HttpWorkerRequest.HttpContext.HttpApplication等. (1)Part 1:前奏 (2)Part 2:核心 (3)Part 3:管道 (4)Part 4:WebForm页面生命周期 (5)Part 5:MVC页面声命周期 一.第一个入口:I

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

开篇:ASP.Net是一项动态网页开发技术,在历史发展的长河中WebForm曾一时成为了ASP.Net的代名词,而ASP.Net MVC的出现让这项技术更加唤发朝气.但是,不管是ASP.Net WebForm还是ASP.Net MVC在请求处理机制上大部分都是相同的,只是在请求处理管道上的处理事件做了不同的操作,因此,本文标题不区分ASP.Net WebForm和ASP.Net MVC,但在后续的介绍中会区分开来介绍.此外,本文以IIS经典模式为主,不讨论集成模式(IIS7后加入了集成模式,不用