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，应有尽有

posted @ 2015-05-07 22:49 走在起点阅读(1510) 评论(0) 编辑收藏举报

刷新页面返回顶部

不疯魔不成活

swiper初步探索

Swiper基本结构