slidizle – 可完全自定义jQuery幻灯片插件

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

跨设备响应式设计

可以通过为每一个slide添加适当的class来控制样式

使用简单

同一个页面可以有多个幻灯片实例

实现简单的CSS3动画

鼠标滑过时可以暂停播放

可以实现无限循环幻灯片

支持键盘和移动触摸事件

可以制作带缩略图的幻灯片导航

可以制作幻灯片播放的进度条效果

使用方法:

或者下载压缩包，在页面中引入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 elementsvar $sliders = $('[data-slidizle]').slidizle();// you can pass options directly at instanciation like thisvar $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:

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 wrrappercontent                 : 'slidizle-content',   // class applied on next navigation element     next                    : 'slidizle-next',          // class applied on previous navigation elementprevious                : 'slidizle-previous',          // class applied on all slides that are before the active onebeforeActive            : 'before-active',// class applied on all slides that are after the active oneafterActive             : 'after-active',// class applied on the next active slidenextActive              : 'next',// class applied on the previous active slidepreviousActive          : 'previous',// class applied on container when the slider is in forward modeforward                 : 'forward',// class applied on container when the slider is in backward modebackward                : 'backward',           // class applied on navigation elementnavigation              : 'slidizle-navigation',            // class applied on timer elementtimer                   : 'slidizle-timer', // not documented       // class applied on each slideslide                   : 'slidizle-slide',         // class applied on the next and previous navigation, or the all slider when disableddisabled                : 'disabled',               // the class applied on container when the slider is at his first slidefirst                   : 'first',// the class applied on container when the slider is at his last slidelast                    : 'last',// the play class applied on the containerplay                    : 'played',             // the pause class applied on the containerpause                   : 'paused',             // the stop class applied on the containerstop                    : 'stoped',             // an class to access the sliderslider                  : '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 modeloading                 : '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：返回幻灯片的设置对象
https://github.com/olivierbossel/slidizle

slidizle – 可完全自定义jQuery幻灯片插件相关推荐

jquery 封装幻灯插件_21个jQuery幻灯片插件
jquery 封装幻灯插件 21 jQuery Slideshow plugins 21个jQuery幻灯片插件 In today`s article I collected most attract ...
SlidesJS基本使用方法和官方文档解释【Jquery幻灯片插件 Jquery相册插件】
SlidesJS基本使用方法和官方文档解释 [Jquery幻灯片插件 Jquery相册插件] 标签: jquery文档functionstringdiv相册 2012-04-19 15:23 3931 ...
html播放ppt插件,lightslider-支持移动触摸的轻量级jQuery幻灯片插件
lightslider是一款轻量级的响应式jQuery幻灯片插件.lightslider幻灯片插件能够支持移动触摸设备,它可以制作为带缩略图的内容幻灯片,或者制作为无限循环的旋转木马.它的特点还有: ...
15款jQuery幻灯片插件
幻灯片效果通常用于展示相册图片或特色推荐内容.一个漂亮的幻灯片更能吸引访客的注意力.本文里面,收集了15款jQuery幻灯片插件,让你的图片展示更漂亮,让你的特色内容更吸引人.如果你是WordPres ...
html5下拉幻灯片插件,强大实用的jQuery幻灯片插件Owl Carousel
强大实用的jQuery幻灯片插件Owl Carousel 分类:代码日期:2017-04-11 点击(199,155) 下载(1) 来源:未知收藏简介 Owl Carousel 是一个强大.实用 ...
html5下拉幻灯片插件,支持多种动画特效的响应式jQuery幻灯片插件
jcSlider是一款效果非常炫酷的支持多种动画特效的响应式jQuery幻灯片插件.该幻灯片插件的文件体积效果,支持各种HTML元素,并且可以使用内置的60多种CSS3动画效果来制作幻灯片的过渡动画. ...
Skippr – 轻量、快速的 jQuery 幻灯片插件
Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口 ...
手势控制幻灯片播放html,FlexSlider|功能强大的响应式jQuery幻灯片插件
FlexSlider是一款功能强大的响应式jQuery幻灯片插件.该幻灯片插件可以制作为带缩略图模式,旋转木马模式等.它可以自适应屏幕大小,并可以制作多种幻灯片过渡特效.它的兼容性强,可以兼容IE7+ ...
Seria一个多功能垂直jQuery幻灯片插件
下载地址 Seria一个多功能垂直jQuery幻灯片插件,可用于创建产品展示,相片画廊,显示博客或新闻.你也可以使用它来创建组合你的工作很有意思! 好消息是,Seria插件可以很容易地定制用几个选项来 ...