Swiper学习之旅（4）-API(3)

2015-05-25

今天是最后一篇API的讲解，基本可以解决简单的使用。

touchRatio

触摸距离与slide滑动距离的比率。就是说，触碰的点离划过的距离为touchRatio*slider长度的时候，才可以切换到下一个slider。

slideToClickedSlide

设置为true则swiping时点击slide会过渡到这个slide。例如slide1向slide2 swipe的过程中轻点slide1会回到slide1，false则不接受此效果。

mySwiper.params

重要参数，获取Swiper对象初始化参数，或者重写该参数

var mySwiper = new Swiper('.swiper-container',{
   autoplay : 1000,
})
$('#btn1').click(function(){
   mySwiper.params.autoplay=200;
})

control

设置为另外一个Swiper实例开始控制该Swiper。

var Swiper1 = new Swiper('#swiper-container1',{
})
var Swiper2 = new Swiper('#swiper-container2',{
})
Swiper1.params.control = Swiper2;//需要在Swiper2初始化后

了解了上面两个API后我们可以做一个同步切换的DEMO

hashnav

如需使用散列导航（有点像锚链接）将此参数设置为true。此外在每个slide处增加data-hash属性。
这样当你的swiper切换时你的页面url就会加上这个属性的值了，你也可以通过进入页面时修改页面url让swiper在初始化时切换到指定的slide。
当你做复杂开发时这个很有用，因为你不必等待前面slide的切换就可以直接跳转到指定的slide了。
使用方法示例,html部分

<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide" data-hash="slide1">
			slider1</div>
		<div class="swiper-slide" data-hash="slide2">
			slider2</div>
		<div class="swiper-slide" data-hash="slide3">
			slider3</div>
	</div>
</div>

js部分

1
2
3

var mySwiper = new Swiper('.swiper-container',{
   hashnav:true,
})

parallax

如需要开启视差效果（相对父元素移动），设置为true并在所需要的元素上增加data-swiper-parallax属性。

自从3.03版本后Swiper为swiper和slide内元素增加视差效果。有两种表现形式：

对于swiper-container的子元素，视差效果基于swiper的progress（0-1之间的小数，如有三个slide则是0->0.5->1）。

对于slides的子元素，视差效果基于slide的progress（1，0，-1，当前slide向左是从0->1，向右是从0->-1）。

data-swiper-parallax接受两种类型的参数。

number（单位：px），移动距离=number*progress。

percentage（百分比），移动距离=percentage(x)progress(x)元素宽度。

你还可以通过data-swiper-parallax-x 和 data-swiper-parallax-y单独设定其移动方向。

例：swiper内有5个slide，则swiper的progress是 0，0.25，0.5，0.75，1。
swiper-container的子元素，设定了data-swiper-parallax=1000，当slide从0过渡到1时（初始向右滑动），该元素向右移动250px。
slides的子元素，设定了data-swiper-parallax=1000，当slide从0过渡到1时（初始向右滑动），该元素相对于slide从0向右移动到250px处。nextslide内元素相对于slide从-250px向右移动0px处。

使用方法示例,css部分

.parallax-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 130%;
    height: 100%;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center;
}

html部分

<div class="swiper-container">
    <!-- Parallax background element -->
    <div 
        class="parallax-bg" 
        style="background-image:url(/demo/img/Parallax.jpg)" 
        data-swiper-parallax="-23%">
    </div>
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <!-- Each slide has parallax title -->
            <div class="title" data-swiper-parallax="-100">Slide 1</div>
            <!-- Parallax subtitle -->
            <div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
            <!-- And parallax text -->
            <div class="text" data-swiper-parallax="-300">
              <p>Lorem ipsum dolor sit amet, ...</p>
            </div>
        </div>
        ...
    </div>
</div>

js部分

1
2
3

var mySwiper = new Swiper('.swiper-container',{
   parallax : true,
})

查看DEMO

paginationBulletRender

渲染分页器小点。这个参数允许完全自定义分页器的指示点。
使用方法示例

var swiper = new Swiper('.swiper-container', {
  pagination: '.swiper-pagination',
  paginationClickable: true,
  paginationBulletRender: function (index, className) {
      return '<span class="' + className + '">' + (index + 1) + '</span>';
  }
});

效果如下

preloadImages

默认为true，Swiper会强制加载所有图片。

lazyLoading

设为true开启图片延迟加载，使preloadImages无效。
需要将图片img标签的src改写成data-src，并且增加类名swiper-lazy。
还可以为slide加一个预加载，

1	<div class="swiper-lazy-preloader"></div>

或者白色的

1	<div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>

当你设置了slidesPerView:'auto' 或者 slidesPerView > 1，还需要开启watchSlidesVisibility。
使用方法示例

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img data-src="path/to/picture-1.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
        </div>
        <div class="swiper-slide">
            <img data-src="path/to/picture-2.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
        </div>
        <div class="swiper-slide">
            <img data-src="path/to/picture-3.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader swiper-lazy-preloader-white"></div>
        </div>
    </div>
</div>

这里添加一个Lazy loading for background images

debugger

debugger调试，使用方法示例

<script>
/* ========
Debugger plugin, simple demo plugin to console.log some of callbacks
======== */
Swiper.prototype.plugins.debugger = function (swiper, params) {
    if (!params) return;
    // Need to return object with properties that names are the same as callbacks
    return {
        onInit: function (swiper){
            console.log('onInit');
        },
        onClick: function (swiper, e) {
            console.log('onClick');
        },
        onTap: function (swiper, e) {
            console.log('onTap');
        },
        onDoubleTap: function (swiper, e) {
            console.log('onDoubleTap');
        },
        onSliderMove: function (swiper, e) {
            console.log('onSliderMove');
        },
        onSlideChangeStart: function (swiper) {
            console.log('onSlideChangeStart');
        },
        onSlideChangeEnd: function (swiper) {
            console.log('onSlideChangeEnd');
        },
        onTransitionStart: function (swiper) {
            console.log('onTransitionStart');
        },
        onTransitionEnd: function (swiper) {
            console.log('onTransitionEnd');
        },
        onReachBeginning: function (swiper) {
            console.log('onReachBeginning');
        },
        onReachEnd: function (swiper) {
            console.log('onReachEnd');
        }
    };
};
</script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    // Enable debugger
    debugger: true
});
</script>

参考资料Swiper中文网