![[代码样式]jQuery.slidizle – jQuery幻灯片插件](https://www.weimahe.com/wp-content/uploads/2020/08/yRP0vc1736.jpg "[代码样式]jQuery.slidizle – jQuery幻灯片插件")
简介
jQuery.slidizle 是一款 jQuery 幻灯片插件，你可以在幻灯片内放任何内容，因为它提供了多种方法让你可以随意的控制幻灯片，而正因为它的高度自定义，所以上手也比其他幻灯片插件更难一些。
浏览器兼容
![[代码样式]jQuery.slidizle – jQuery幻灯片插件](https://www.weimahe.com/wp-content/uploads/2020/08/myJcfT1694.png "[代码样式]jQuery.slidizle – jQuery幻灯片插件"){kind=small} |
![[代码样式]jQuery.slidizle – jQuery幻灯片插件](https://www.weimahe.com/wp-content/uploads/2020/08/6vuYXS1729.png "[代码样式]jQuery.slidizle – jQuery幻灯片插件"){kind=small} |
![[代码样式]jQuery.slidizle – jQuery幻灯片插件](https://www.weimahe.com/wp-content/uploads/2020/08/sKKNqV1694.png "[代码样式]jQuery.slidizle – jQuery幻灯片插件"){kind=small} |
![[代码样式]jQuery.slidizle – jQuery幻灯片插件](https://www.weimahe.com/wp-content/uploads/2020/08/3dMJ071694.png "[代码样式]jQuery.slidizle – jQuery幻灯片插件"){kind=small} |
![[代码样式]jQuery.slidizle – jQuery幻灯片插件](https://www.weimahe.com/wp-content/uploads/2020/08/J1fEzh1694.png "[代码样式]jQuery.slidizle – jQuery幻灯片插件"){kind=small} |
![[代码样式]jQuery.slidizle – jQuery幻灯片插件](https://www.weimahe.com/wp-content/uploads/2020/08/mUTY3d1694.png "[代码样式]jQuery.slidizle – jQuery幻灯片插件"){kind=small} |
|---|---|---|---|---|---|
| IE9+ | Edge | Chrome | Firefox | Opera | Safari |
使用方法
1、引入文件
<link rel="stylesheet" href="https://www.dowebok.com/css/font-awesome.min.css" rel="external nofollow" > <link rel="stylesheet" href="https://www.dowebok.com/css/style.min.css" rel="external nofollow" > <script src="https://www.dowebok.com/js/jquery.min.js"></script> <script src="https://www.dowebok.com/js/jquery.slidizle.js"></script>
2、HTML
<div class="dowebok" data-slidizle> <ul data-slidizle-content> <li></li> <li></li> <li></li> </ul> <div data-slidizle-next> <i class="fa fa-arrow-right"></i> </div> <div data-slidizle-previous> <i class="fa fa-arrow-left"></i> </div> <ul data-slidizle-navigation></ul> </div>
3、JavaScript
$('.dowebok').slidizle();
配置
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| timeout | 整数 | null | 幻灯片播放间隔 |
| pauseOnHover | 布尔值 | false | 鼠标悬停暂停播放 |
| nextOnClick | 布尔值 | false | 鼠标悬停暂停播放 |
| loop | 布尔值 | false | 循环播放 |
| autoPlay | 布尔值 | false | 自动播放 |
| keyboardEnabled | 布尔值 | true | 键盘支持 |
| touchEnabled | 布尔值 | true | 触摸事件支持 |
| loadBeforeTransition | 布尔值 | true | 预加载 |
| disabled | 布尔值 | false | |
| onInit | 函数 | null | 幻灯片被单击后的回调函数 |
| beforeChange | 函数 | null | 幻灯片切换前的回调函数 |
| onChange | 函数 | null | 幻灯片切换时的回调函数 |
| afterChange | 函数 | null | 幻灯片切换后的回调函数 |
| beforeLoading | 函数 | null | 加载幻灯片钱的回调函数 |
| onLoading | 函数 | null | 加载幻灯片时的回调函数 |
| afterLoading | 函数 | null | 加载幻灯片后的回调函数 |
| onNext | 函数 | null | |
| onPrevious | 函数 | null | |
| onPlay | 函数 | null | 开始自动播放时的回调函数 |
| onPause | 函数 | null | 暂停播放时的回调函数 |
| onResume | 函数 | null | 恢复后的回调函数 |
GitHub 地址：https://github.com/olivierbossel/slidizle
[b2_file link="
百度网盘" name="jQuery.slidizle – jQuery幻灯片插件" pass="" code=""]
