jQuery幻燈片插件slick

拉丁傳說 2018-4-13 1346

slick 是一個基于 jQuery 的幻燈片插件,具有以下特點:

  • 支持響應式
  • 瀏覽器支持 CSS3 時,則使用 CSS3 過度/動畫
  • 支持移動設備滑動
  • 支持桌面瀏覽器鼠標拖動
  • 支持循環
  • 支持左右控制
  • 支持動態添加、刪除、過濾
  • 支持自動播放、圓點、箭頭、回調等等

兼容

瀏覽器兼容:兼容 IE7+ 及其他主流瀏覽器,若要兼容 IE7,需修改 CSS(slick.css)。

jQuery兼容:兼容 1.7 及以上版本。

使用方法

1、引入文件

<link rel="stylesheet" href="style/slick.css">
<script src="script/jquery.min.js"></script>
<script src="script/slick.min.js"></script>

2、HTML

<div class="slick">
?? ?<div><a href="http://www.dowebok.com"><img src="images/1.jpg" alt=""></a></div>
?? ?<div><a href="http://www.dowebok.com"><img src="images/2.jpg" alt=""></a></div>
?? ?<div><a href="http://www.dowebok.com"><img src="images/3.jpg" alt=""></a></div>
?? ?<div><a href="http://www.dowebok.com"><img src="images/4.jpg" alt=""></a></div>
?? ?<div><a href="http://www.dowebok.com"><img src="images/5.jpg" alt=""></a></div>
</div>

3、JavaScript

$(function(){
?? ?$('.slick').slick({
?? ??? ?dots: true
?? ?});
});

參數

參數 類型 默認值 說明
accessibility 布爾值 true 啟用Tab鍵和箭頭鍵導航
autoplay 布爾值 false 自動播放
autoplaySpeed 整數 3000 自動播放間隔
centerMode 布爾值 false 中心模式
centerPadding 字符串 ’50px’ 中心模式左右內邊距
cssEase 字符串 ‘ease’ CSS3 動畫
customPaging function n/a 自定義分頁
dots 布爾值 false 指示點
draggable 布爾值 true 啟用桌面拖動
easing 字符串 ‘linear’ animate() fallback easing
fade 布爾值 false 淡入淡出
arrows 布爾值 true 左右箭頭
infinite 布爾值 true 循環播放
lazyLoad 字符串 ‘ondemand’ 延遲加載,可選 ondemand 和 progressive
onBeforeChange(this, index) method null 開始切換前的回調函數
onAfterChange(this, index) method null 切換后的回調函數
onInit(this) method null 第一次初始化后的回調函數
onReInit(this) method null 再次初始化后的回調函數
pauseOnHover 布爾值 true 鼠標懸停暫停自動播放
responsive object null 斷點觸發設置
slide 字符串 ‘div’ 滑動元素查詢
slidesToShow 整數 1 幻燈片每屏顯示個數
slidesToScroll 整數 1 幻燈片每次滑動個數
speed 整數 300 滑動時間
swipe 布爾值 true 移動設備滑動事件
touchMove 布爾值 true 觸摸滑動
touchThreshold 整數 5 滑動切換閾值,即滑動多少像素后切換
useCSS 布爾值 true 使用 CSS3 過度
vertical 布爾值 false 垂直方向

方法

方法 Argument 說明
slick() options : object 初始化 slick
unslick() 銷毀 slick
slickNext() 切換下一張
slickPrev() 切換上一張
slickPause() 暫停自動播放
slickPlay() 開始自動播放
slickGoTo() index : int 切換到第 x 張
slickCurrentSlide() 返回當前幻燈片索引
slickAdd() element : html or DOM object, index: int, addBefore: bool Add a slide. If an index is provided, will add at that index, or before if addBefore is set. If no index is provided, add to the end or to the beginning if addBefore is set. Accepts HTML String
slideRemove() index: int, removeBefore: bool Remove slide by index. If removeBefore is set true, remove slide preceding index, or the first slide if no index is specified. If removeBefore is set to false, remove the slide following index, or the last slide if no index is set.
slickFilter() filter : selector or function Filters slides using jQuery .filter syntax
slickUnfilter() Removes applied filter
slickSetOption(option,value,refresh) option : string(option name), value : depends on option, refresh : 布爾值 Sets an option live. Set refresh to true if it is an option that changes the display

演 示 下 載

最新回復 (0)
返回
發新帖
下载麻将游戏四人麻将