Swiper学习之旅（2）-API(1)

2015-05-22

上篇文章讲了一些swiper的基本用法，今天来介绍一下常用的一些API

direction

slide滑动方向，可设置horizontal(水平)或vertical(垂直),默认是水平

pagination

分页器容器的css选择器或HTML标签，这里需要配合html标签使用，在div中添加class标签：

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

js中进行相应设置

1	pagination: '.swiper-pagination'

这样就可以出现分页的按钮

paginationClickable

此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换，默认是false，这个API一般是配合上面的pagination一起使用

spaceBetween

slide之间的距离（单位px）,如下图

slidesPerView

设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为number或者 auto，auto则自动根据slides的宽度来设定数量。loop模式下如果设置为auto还需要设置另外一个参数loopedSlides。

loop

设置为true 则开启loop模式。loop模式：会在wrapper前后生成若干个slides让slides看起来是衔接的，用于无限循环切换。
loop模式在与free模式同用时会产生抖动，因为free模式下没有复制slide的时间点。

loopedSlides

在loop模式下使用slidesPerview:auto,还需使用该参数设置所要用到的loop个数,这里的个数与slider的个数相同

centeredSlides

设定为true时，当前slider会居中，而不是默认状态下的居左,默认false
设置为true效果如下

设置为false效果如下

freeMode

默认为false，普通模式slide滑动时只滑动一格，并自动贴合wrapper，设置为true则变为free模式，slide会根据惯性滑动且不会贴合。

slidesPerColumn

多行布局里面每列的slide数量,这时候排列会按照由上到下的排列，举例slidesPerColumn:2,如图

最后来做一个Demo，如果想在slider中套用slider怎么办，办法就是new两个swiper-container
html部分

<div class="swiper-container swiper-container-h">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Horizontal Slide 1</div>
        <div class="swiper-slide">
            <div class="swiper-container swiper-container-v">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Vertical Slide 1</div>
                    <div class="swiper-slide">Vertical Slide 2</div>
                    <div class="swiper-slide">Vertical Slide 3</div>
                    <div class="swiper-slide">Vertical Slide 4</div>
                    <div class="swiper-slide">Vertical Slide 5</div>
                </div>
                <div class="swiper-pagination swiper-pagination-v"></div>
            </div>
        </div>
        <div class="swiper-slide">Horizontal Slide 3</div>
        <div class="swiper-slide">Horizontal Slide 4</div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination-h"></div>
</div>

js部分

var swiperH = new Swiper('.swiper-container-h', {
    pagination: '.swiper-pagination-h',
    paginationClickable: true,
    spaceBetween: 50
});
var swiperV = new Swiper('.swiper-container-v', {
    pagination: '.swiper-pagination-v',
    paginationClickable: true,
    direction: 'vertical',
    spaceBetween: 50
});

查看Demo