支持移动端和桌面设备的轻量级jQuery幻灯片插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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事件。