swipeslider是一款支持移动端和桌面设备的轻量级jQuery幻灯片插件。它支持图片和其它HTML内容，支持幻灯片内容无限循环播放。它的特点还有：

  • 支持桌面设备设备事件和移动设备的swipe事件。
  • 支持前后导航按钮。
  • 支持分页导航按钮。
  • 可以在幻灯片中放置图片或任何HTML元素。
  • 支持多种动画效果。
  • 使用CSS3 transition来制作平滑过渡效果。
  • 响应式设计。

安装

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

bower install swipeslider

使用方法

使用该幻灯片插件需要在页面中引入jquery，swipeslider.min.js和swipeslider.css文件。

<link rel="stylesheet" type="text/css" href="dist/swipeslider.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="dist/swipeslider.min.js"></script>
HTML结构

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

<figure id="sample_slider" class="swipeslider">
  <ul class="sw-slides">
    <li class="sw-slide">
      <img src="img/1.jpg" alt="......">
    </li>
    <li class="sw-slide">
      <img src="img/2.jpg" alt="......">
    </li>
    <li class="sw-slide">
      <img src="img/3.jpg" alt="......">
    </li>
    <li class="sw-slide">
      <img src="img/4.jpg" alt="......">
    </li>
  </ul>
</figure>
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()方法来初始化该幻灯片插件。

<script>
  $(window).load(function() {
    $('#sample_slider').swipeslider();
  });
</script>

配置参数

可以在初始化插件的时候以对象的方式传入配置参数：

$('#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事件。

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