swipeslider支持移动端和桌面设备的轻量级幻灯片插件
swipeslider幻灯片插件的github地址为：https://github.com/AlexEmashev/swipeslider
支持图片和其它HTML内容，支持幻灯片内容无限循环播放。
它的特点还有：
支持桌面设备设备事件和移动设备的swipe事件。
支持前后导航按钮。
支持分页导航按钮。
可以在幻灯片中放置图片或任何HTML元素。
支持多种动画效果。
扫描二维码关注公众号，回复：
392731 查看本文章
使用CSS3 transition来制作平滑过渡效果。
响应式设计。
CSS样式
可以通过下面的CSS class类来自定义幻灯片的样式。
| class | 描述 |
| .swipslider | 包含幻灯片的父容器。 |
| .sw-slides | 幻灯片容器。 |
| .sw-slide | 幻灯片的slide，可以包含图片或其它HTML元素。 |
| .sw-slide > img | 包含图片的slide。 |
| .sw-content | 包含其它HTML元素的slide。 |
| .sw-next-prev | 前后导航按钮整体样式。 |
| .sw-prev | 向前按钮，使用::after伪元素来覆盖内容。 |
| .sw-next | 向后按钮，使用::after伪元素来覆盖内容。 |
| .sw-bullet | 分页导航按钮容器。 |
| .sw-bullet li | 单个分页导航按钮。 |
| .sw-bullet li.active | 当前激活的分页导航按钮。 |
初始化插件
在页面DOM元素加载完毕之后，可以通过swipeslider()方法来初始化该幻灯片插件。
|
1
2
3
4
5
|
<script>
$(window).load(
function
() {
$(
'#sample_slider'
).swipeslider();
});
</script>
|
配置参数
可以在初始化插件的时候以对象的方式传入配置参数：
|
1
|
$(
'#sample_slider'
).swipeslider({autoPlay:
false
, swipe:
false
});
|
可用的配置参数有：
| 参数 | 默认值 | 描述 |
| sliderHeight | '60%' | 设置幻灯片的高度。如果你想根据宽度来自动改变高度，可以设置为百分比。如果设置为像素则使用固定高度。 |
| transitionDuration | 500 | 幻灯片动画的持续时间，单位毫秒。 |
| timingFunction | 'ease-out' | 过渡动画的easing效果（CSS easing函数）。 |
| autoPlay | true | 是否自动播放幻灯片。 |
| autoPlayTimeout | 3000 | 自动播放的时间间隔，单位毫秒。 |
| prevNextButtons | true | 是否显示前后导航按钮。 |
| bullets | true | 是否显示分页导航按钮。 |
| swipe | true | 是否允许移动端的swipe事件。 |