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

PetitQ 幻灯片/轮播 2018-11-06 2.96K 0 0

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

使用方法：

使用该幻灯片插件需要引入 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">
```
```
        
```

        <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