Swiper-强大的移动手机端幻灯片插件

Swiper是一款支持硬件加速过渡动画的移动手机幻灯片插件。该幻灯片可以很好的在iOS，Android，Windows Phone 8和桌面浏览器中工作。Swiper提供了大量参数和api，功能非常强大。

安装

可以通过bower来安装该幻灯片插件。

$ bower install swiper                  
                

使用方法

使用该幻灯片插件需要引入swiper.css和swiper.js，你可以通过cdn加速来引入这些文件：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.min.css">
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.jquery.min.js"></script>                  
                

HTML结构

该幻灯片的基本HTML结构如下：

<!-- 幻灯片的容器 -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <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>
                

CSS样式

你需要为幻灯片的容器设置一个宽度和高度：

.swiper-container {
    width: 600px;
    height: 300px;
}
                

初始化插件

可以通过下面的方法来初始化该幻灯片插件。

var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    direction: 'vertical',
    loop: true,
    
    // If we need pagination
    pagination: '.swiper-pagination',
    
    // Navigation arrows
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    
    // And if we need scrollbar
    scrollbar: '.swiper-scrollbar',
  })                    
                

如果你使用jQuery或Zepto，可以使用下面的方法来初始化插件。

$(document).ready(function () {
  //initialize swiper when document ready  
  var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    direction: 'vertical',
    loop: true
  })        
});                  
                

配置参数

Swiper幻灯片的可用配置参数有：

完整的配置参数，回调函数级API请参考：Swiper API

Swiper幻灯片插件的github地址为：https://github.com/nolimits4web/Swiper