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幻灯片的可用配置参数有:

参数 类型 默认值 描述
initialSlide number 0 初始化的slide的序号
direction string 'horizontal' 幻灯片的方向,可以是'horizontal' 或 'vertical'
speed number 300 幻灯片的过渡动画速度
setWrapperSize boolean false 设置为true时,幻灯片会将容器的宽度和高度设置为slide的宽度和高度
virtualTranslate boolean false Enabled this option and swiper will be operated as usual except it will not move, real translate values on wrapper will not be set. Useful when you may need to create custom slide transition
width number 幻灯片的宽度
height number 幻灯片的高度
autoHeight boolean false 设置为true时幻灯片自动适应每一个slide的高度
roundLengths boolean false 设置为true可以防止模糊文字的出现
nested boolean false 嵌套幻灯片,水平和垂直幻灯片相互嵌套
autoplay number 自动播放的延迟时间,如果为设置将不自动播放
autoplayStopOnLast boolean false 是否到达最后一个slide时停止自动播放
autoplayDisableOnInteraction boolean true 设置为false时,用户滑动幻灯片后不会停止自动播放
watchSlidesProgress boolean false 是否计算每个slide的进度
watchSlidesVisibility boolean false 启用该选项时在视口中的slide将被添加额外的class
freeMode boolean false 如果设置为true,幻灯片将不会有固定的位置
freeModeMomentum boolean true 如果设置为true,幻灯片在滑动后会有一些惯性
freeModeMomentumRatio number 1 值越大惯性越大
freeModeMomentumBounce boolean true 如果不想要惯性效果设置为false
freeModeMomentumBounceRatio number 1 值越大弹性效果越强
freeModeMinimumVelocity number 0.02 free mode的最小手指触摸速度
effect string 'slide' 可以是"slide", "fade", "cube", "coverflow" 或 "flip"
fade object fade: {
crossFade: false
}
fade效果参数
cube object cube: {
slideShadows: true,
shadow: true,
shadowOffset: 20,
shadowScale: 0.94
}
立方体效果参数
coverflow object coverflow: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows : true
}
coverflow效果参数
flip object flip: {
slideShadows : true
limitRotation: true
}
flip效果参数
parallax boolean false 设置为true时可以制作视觉差效果
spaceBetween number 0 幻灯片slide之间的距离
slidesPerView number 或 'auto' 1 幻灯片每一个视图的数量
slidesPerColumn number 1 幻灯片每一列的数量
slidesPerColumnFill string 'column' 幻灯片如何填充行和列,可以是column' 或 'row'
slidesPerGroup number 1 幻灯片分组
centeredSlides boolean false 设置为true时,当前激活的幻灯片居中显示
slidesOffsetBefore number 0 在容器中第一个幻灯片slide之前添加一些空白的像素,单位像素
slidesOffsetAfter number 0 在容器中最后一个幻灯片slide之后添加一些空白的像素,单位像素
grabCursor boolean false 在桌面设备中设置为true,鼠标光标变为grab形状
touchEventsTarget string 'container' touch事件监听的目标元素
touchRatio number 1 Touch ration
touchAngle number 45 移触摸的触发角度
simulateTouch boolean true 是否接收鼠标事件
shortSwipes boolean true 设置为false禁止short swipes
longSwipes boolean true 设置为false禁止long swipes
longSwipesRatio number 0.5 在long swipes中触发next/previous滑动的比例
longSwipesMs number 300 在long swipes中触发next/previous滑动最小持续时间(毫秒)
followFinger boolean true 如设置为false,幻灯片只有在手指释放时才动画
onlyExternal boolean false 如果设置为true,那么只有通过API来切换幻灯片
threshold number 0 阈值,单位像素
touchMoveStopPropagation boolean true 设置为true时,分页的“touchmove”被禁止
iOSEdgeSwipeDetection boolean false Enable to release Swiper events for swipe-to-go-back work in iOS UIWebView
iOSEdgeSwipeThreshold number 20 Area (in px) from left edge of the screen to release touch events for swipe-to-go-back in iOS UIWebView

完整的配置参数,回调函数级API请参考:Swiper API

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