久久精品WWW人人做人人爽,午夜亚洲AⅤ无码高潮片在线,国产午夜精华无码网站

Slick.js使用方法——幻燈片

2021-5-17 前端達人

和Swiper.js一樣

簡介

slick 是一個基于 jQuery 的響應觸摸式幻燈片插件，支持IE8+，Chrome, Firefox, and Safari，具有以下特點：

支持響應式
瀏覽器支持 CSS3 時，則使用 CSS3 過度/動畫
支持移動設備滑動
支持桌面瀏覽器鼠標拖動
支持循環(huán)
支持左右控制
支持動態(tài)添加、刪除、過濾
支持自動播放、圓點、箭頭、回調(diào)等等

兼容

瀏覽器兼容：兼容 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>

注意：需jQuery 1.7

2、HTML

  
    
        <div class="slick">
    

    
            <div><a ><img src="images/1.jpg" alt=""></a></div>
    

    
            <div><a ><img src="images/2.jpg" alt=""></a></div>
    

    
            <div><a ><img src="images/4.jpg" alt=""></a></div>
    

    
            <div><a ><img src="images/3.jpg" alt=""></a></div>
    
    <div><a ><img src="images/5.jpg" alt=""></a></div>
    
        </div>

3、JavaScript

  
    
        $(function(){
    

    
            $('.slick').slick({
    

    
                dots: true
    

    
        });
    

    
        });

參數(shù)

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