jQuery.slidizle-可完全自定义的响应式jQuery幻灯片插件

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > jQuery.slidizle-可完全自定义的响应式jQuery幻灯片插件
jQuery.slidizle-可完全自定义的响应式jQuery幻灯片插件
分享:

    插件介绍

    jQuery.slidizle是一款可完全自定义的响应式jQuery幻灯片插件。该插件只是将一些class类放置到幻灯片的HTML标签中,用户可以通过修改这些class来修改幻灯片的外观。

    浏览器兼容性

    浏览器兼容性
    时间:01-15
    阅读:
简要教程

jQuery.slidizle是一款可完全自定义的响应式jQuery幻灯片插件。该插件只是将一些class类放置到幻灯片的HTML标签中,用户可以通过修改这些class来修改幻灯片的外观。它的特点还有:

  • 跨设备响应式设计。
  • 可以通过为每一个slide添加适当的class来控制样式。
  • 使用简单。
  • 同一个页面可以有多个幻灯片实例。
  • 实现简单的CSS3动画。
  • 鼠标滑过时可以暂停播放。
  • 可以实现无限循环幻灯片。
  • 支持键盘和移动触摸事件。
  • 可以制作带缩略图的幻灯片导航。
  • 可以制作幻灯片播放的进度条效果。

安装

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

bower install jquery.slidizle    
  

使用方法

或者下载压缩包,在页面中引入jquery和jquery.slidizle.js文件。

<script src="jquery.min.js"></script>
<script src="js/jquery.slidizle.js"></script>    
  
HTML结构

该幻灯片的基本HTML结构如下:

<div class="my-cool-slider" data-slidizle>

    <ul class="my-cool-slider-content" data-slidizle-content>
        <li class="my-cool-slide">
            Hello world
        </li>
        <li class="my-cool-slide">
            Hello world
        </li>
        <li class="my-cool-slide">
            Hello world
        </li>
    </ul>

    <ul class="my-cool-navigation" data-slidizle-navigation>
        <!-- automagically filled with some li for your navigation -->
        <!-- can be custom too (cf. sample index.html) -->
    </ul>

    <button class="my-cool-next-button" data-slidizle-next>Next</button>
    <button class="my-cool-previous-button" data-slidizle-next>Previous</button>

</div>    
  
初始化插件

你可以通过jQuery来调用该幻灯片插件:

jQuery(function($) {

    // init slidizle on all data-overlizle elements
    var $sliders = $('[data-slidizle]').slidizle();

    // you can pass options directly at instanciation like this
    var $sliders = $('[data-slidizle]').slidizle({
        pauseOnHover : true,
        timeout : 5000
        // etc...
    });

// use the api through jquery element
$sliders.filter(':first').slidizle('next');

// get the api from element and use it :
var api = $sliders.filter(':first').data('slidizle_api');
api.next();   
  

你也可以使用下面的方法使用javaScript对象的方式来创建幻灯片:

// instanciate slidizle :
var mySlider = new Slidizle($('#mySlider'), {
    timeout : 5000
    // etc...
});

// using the api :
mySlider.goto(2); // go to slide with index 2 (mean third slide)
// etc...    
  
Class类

基本的class

  • slidizle:添加在容器container上的class。
  • slidizle-content:添加在内容容器上的class。
  • slidizle-slide:添加在每一个slide上的class。
  • slidizle-next:添加在next按钮上的class。
  • slidizle-previous:添加在previous按钮上的class。
  • slidizle-navigation:添加在导航容器上的class。

状态class

  • active:添加在活动slide上的class。
  • loading:添加在当前加载的slide的容器和slide上的class。
  • forward:添加在向前移动的容器上的class。
  • backward:添加在向后移动的容器上的class。
  • disabled:添加在被禁用的next和previous元素上的class。
  • played:当幻灯片进入播放模式时添加在容器上的class。
  • paused:当幻灯片进入暂停模式时添加在容器上的class。
  • stoped:当幻灯片进入停止模式时添加在容器上的class。
  • slide-{index}:添加在容器slide-0, slide-1,...上的class。
  • loaded-slide-{index}:和slide-{index}相同,但是仅在slide被加载后才添加。
  • first:添加到第一个slide上的class。
  • last:添加到最后一个slide上的class。
  • previous:添加到前一个slide上的class。
  • next:添加到下一个slide上的class。
  • before-active:添加到被激活前的那一个slide上的class。
  • after-active::添加到被激活后的那一个slide上的class。

配置参数

classes : {

    // class applied on content wrrapper
    content                 : 'slidizle-content',   

    // class applied on next navigation element     
    next                    : 'slidizle-next',          

    // class applied on previous navigation element
    previous                : 'slidizle-previous',          

    // class applied on all slides that are before the active one
    beforeActive            : 'before-active',

    // class applied on all slides that are after the active one
    afterActive             : 'after-active',

    // class applied on the next active slide
    nextActive              : 'next',

    // class applied on the previous active slide
    previousActive          : 'previous',

    // class applied on container when the slider is in forward mode
    forward                 : 'forward',

    // class applied on container when the slider is in backward mode
    backward                : 'backward',           

    // class applied on navigation element
    navigation              : 'slidizle-navigation',            

    // class applied on timer element
    timer                   : 'slidizle-timer', // not documented       

    // class applied on each slide
    slide                   : 'slidizle-slide',         

    // class applied on the next and previous navigation, or the all slider when disabled
    disabled                : 'disabled',               

    // the class applied on container when the slider is at his first slide
    first                   : 'first',

    // the class applied on container when the slider is at his last slide
    last                    : 'last',

    // the play class applied on the container
    play                    : 'played',             

    // the pause class applied on the container
    pause                   : 'paused',             

    // the stop class applied on the container
    stop                    : 'stoped',             

    // an class to access the slider
    slider                  : 'slidizle',               

    // the className to add to active navigation, slides, etc...
    active                  : 'active',             

    // the className to add to the slider and slides when it is in loading mode
    loading                 : 'loading'             
},                  

// the slider interval time between each medias
timeout                 : null,

// set if the slider has to make pause on mouse hover
pauseOnHover                : false,                        

// set if the slider has to go next on mouse click
nextOnClick                 : false,                        

// set if the slider has to go first item when next on last
loop                    : false,                        

// set if the slider has to play directly or not if a timeout is specified
autoPlay                : true,                     

// activate or not the keyboard
keyboardEnabled             : true,                     

// activate or not the touch navigation for mobile (swipe)
touchEnabled                : true,                                         

// specify if need to load the next content before the transition
loadBeforeTransition            : true,                         

// specify if the slider is disabled or not (can be a function that return true or false)
disabled                : false,

// callback when the slider is inited
onInit                  : null,                     

// callback when a slide is clicked
onClick                 : null,                     

// callback before the slider change from one media to another
beforeChange                : null,

// callback when the slider change from one media to another
onChange                : null,                     

// callback after the slider change from one media to another
afterChange                 : null,

// callback before the slider begin to load the slide
beforeLoading               : null,

// callback during the loading progress
onLoading               : null,

// callback after the slider has loaded the next slide (before the actual change)
afterLoading                : null,

// callback when the slider change for the next slide
onNext                  : null,                     

// callback when the slider change for the previous slide
onPrevious              : null,                     

// callback when the slider change his state to play
onPlay                  : null,                     

// callback when the slider change his state to pause
onPause             : null,                     

// callback when the slider resume after a pause
onResume                : null    
  

所有的参数都可以在DOM元素中使用下面的模式来进行设置:

data-overlizle-{option-separated-with-dash}="{value}"    
  

例如:

<div data-slidizle 
     data-slidizle-pause-on-hover="true" 
     data-slidizle-classes-loading="myLoadingClass">
  <!-- slider content here... -->
</div>    
  
属性

Slidizle提供了一下一些直接在DOM元素上使用的data属性。

  • data-slidizle-content:应用在包含幻灯片的容器上。
  • data-slidizle-navigation:应用在幻灯片的导航容器上。
  • data-slidizle-next :应用在触发导航到下一个幻灯片的元素上。
  • data-slidizle-previous :应用在触发导航到前一个幻灯片的元素上。
  • data-slidizle-slide-id="..." :将幻灯片和一个导航元素项关联。
  • data-slidizle-timeout="...":应用在幻灯片上用于指定切换的时间间隔。

事件

Slidizle有下面一些可有的事件。

  • slidizle.init :在幻灯片初始化后触发。
  • slidizle.beforeChange:在幻灯片开始切换前触发。
  • slidizle.change:在幻灯片切换到另一个slide时触发。
  • slidizle.afterChange:在幻灯片切换到另一个slide后触发。
  • sliditle.beforeLoading:在幻灯片开始加载下一个slide时触发。
  • sliditle.onLoading:在幻灯片加载下一个slide的过程中触发。
  • sliditle.afterLoading:在幻灯片开始加载下一个slide后触发。
  • slidizle.next:当切换到下一个slide时触发。
  • slidizle.previous:当切换到前一个slide时触发。
  • slidizle.play:在幻灯片进入自动播放模式时触发。
  • slidizle.pause :在幻灯片暂停播放时触发。
  • slidizle.resume:在幻灯片恢复播放时触发。
  • slidizle.stop:在幻灯片停止播放时触发。
  • slidizle.click:当点击某一个slide时触发。

方法API

Slidizle提供了下面的一些公开的方法。

  • next():跳转到下一个slide。
  • previous():跳转到前一个slide。
  • goto(id):跳转到指定id的slide。
  • gotoAndPlay(id):跳转到指定id的slide并开始播放。
  • gotoAndStop(id):跳转到指定id的slide并停止播放。
  • play():开始播放幻灯片。该方法必须设置timeout时间。
  • pause():暂停播放幻灯片。
  • stop():停止播放幻灯片。
  • togglePlayPause():在暂停和播放之间切换。
  • getCurrentSlide():返回当前的slide。
  • getNextSlide():返回下一个slide。
  • getPreviousSlide():返回前一个slide。
  • getPreviousActiveSlide():返回前一个激活的slide。
  • getAllSlides():返回所有的slide。
  • getLoadingProgress():返回到下一个slide的加载进度。
  • getRemainingTimeout():返回到下一个幻灯片的超时时间。
  • getCurrentTimeout():返回当前激活的slide的超时时间。
  • getTotalTimeout():返回某个slide的总超时时间。
  • isLast():如果是最后一个slide返回true。
  • isFirst():如果是第一个slide返回true。
  • isLoop():如果是循环模式返回true。
  • isPlay():如果是自动播放模式返回true。
  • isDisabled():如果slider被禁用返回true。
  • isPause():如果是暂停模式返回true。
  • isStop():如果是停止播放模式返回true。
  • isHover():如果鼠标滑过幻灯片返回true。
  • getSettings:返回幻灯片的设置对象。

slidizle幻灯片的github地址为:https://github.com/olivierbossel/slidizle