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

PetitQ 幻灯片/轮播 2018-11-06 1.59K 0 0

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 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:

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">

```
  
```
```
</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：返回幻灯片的设置对象
github 地址：https://github.com/olivierbossel/slidizle

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

已有 398 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

幻灯片/轮播

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

使用方法:

HTML 结构:

初始化插件:

基本的 class:

状态 class:

配置参数:

属性：

事件：

方法 API：

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

相关文章

swipeslider - 轻量级jQuery幻灯片插件

创意CSS3滑动覆盖幻灯片jQuery特效

多种过渡动画jquery焦点图特效

发表回复取消回复

热销模板

幻灯片/轮播

使用方法:

HTML 结构:

初始化插件:

基本的 class:

状态 class:

配置参数:

属性：

事件：

方法 API：

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复