Skippr-最简洁实用的jQuery幻灯片插件

Skippr是一款简洁实用的jQuery幻灯片插件。该幻灯片的特点是易于使用，它需要的HTML代码非常简单，并提供各种参数来控制幻灯片的播放。

安装

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

bower install skippr          
                

使用方法

在页面中引入jQuery和skippr.css和skippr.js文件。

<link rel="stylesheet" type="text/css" href="dist/skippr.css" />
<script type="text/javascript" src="path/to/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="dist/skippr.js"></script>                  
                

HTML结构

使用一个<div>容器来包裹幻灯片，每个幻灯片可以通过background-image属性来设置背景图片。

<div id="container">
    <div id="theTarget">
        <div style="background-image: url(img/image1.jpg)"></div>
        <div style="background-image: url(img/image2.jpg)"></div>
        <div style="background-image: url(img/image3.jpg)"></div>
        <div style="background-image: url(img/image4.jpg)"></div>
        <div style="background-image: url(img/image5.jpg)"></div>
    </div>    
</div>                  
                

初始化插件

在页面DOM元素加载完毕之后，可以通过skippr()方法来初始化该幻灯片插件。

$(document).ready(function(){

    $("#theTarget").skippr();

});                  
                

配置参数

可以以对象的方式在skippr()中传入配置参数：

$("#theTarget").skippr({
    transition: 'slide',
    speed: 1000,
    easing: 'easeOutQuart',
    navType: 'block',
    childrenElementType: 'div',
    arrows: true,
    autoPlay: false,
    autoPlayDuration: 5000,
    keyboardOnAlways: true,
    hidePrevious: false
});                  
                

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