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