【jQuery】スライダープラグイン「slick」実装サンプル（横幅いっぱい＋前後のスライドを半透明にする＋お洒落にしてみる）

2019.8.30
jQuery

正直、簡単かなと思っていましたが、結構時間がかかってしまったので備忘録も兼ねて。
ポイントは、「overflow: hidden;」と「overflow: visible;」。

横幅いっぱいで、

並んでるスライドショーをつくってみましょう

実装サンプル（横幅いっぱい＋前後のスライドを半透明にする）
実装サンプル NG
実装サンプル＋自動再生にしてみる
実装サンプル＋CSSでドットインジケーター（〇）をお洒落にしてみる
オプション設定をまとめました
イベント設定をまとめました
さいごに

実装サンプル（横幅いっぱい＋前後のスライドを半透明にする）

今回は、仕様がわかりやすいようにスライド画像の幅は「280px」で実装してみました。
slick-list要素に「overflow: visible;」を指定することで横幅いっぱいになります。

See the Pen
【jQuery】スライダープラグイン「slick」実装サンプル（横幅いっぱい＋前後のスライドを半透明にする） by 125naroom (@125naroom)
on CodePen.

実装サンプル NG

slick-list要素に「overflow: visible;」を指定しないと横幅いっぱいにはならないので要注意です。

See the Pen
【jQuery】スライダープラグイン「slick」実装サンプル NG by 125naroom (@125naroom)
on CodePen.

実装サンプル＋自動再生にしてみる

オプションの設定をして自動で動くようにしてみました。

See the Pen
【jQuery】スライダープラグイン「slick」実装サンプル＋自動再生にしてみる by 125naroom (@125naroom)
on CodePen.

実装サンプル＋CSSでドットインジケーター（〇）をお洒落にしてみる

ドットインジケーターをお洒落にすると雰囲気がガラリと変わるのでおすすめです。

See the Pen
【jQuery】スライダープラグイン「slick」実装サンプル＋CSSでドットインジケーター（〇）をお洒落にしてみる by 125naroom (@125naroom)
on CodePen.

オプション設定をまとめました

オプション	説明	初期値
accessibility	タブと矢印キーのナビゲーション	true
adaptiveHeight	スライドの高さの自動調整	false
autoplay	自動再生	false
autoplaySpeed	自動再生のスピード（ミリ秒単位）	3000
arrows	スライドの左右の矢印ボタン	true
asNavFor	スライダを他のスライダのナビゲーションに設定する（class名またはID名）	null
appendArrows	スライドの左右の矢印ボタンを挿入する場所を変更	$(element)
appendDots	ドットインジケーターの場所変更	$(element)
prevArrow	左の矢印ボタンのHTMLをカスタマイズ	<button type=”button” class=”slick-prev”>Previous</button>
nextArrow	右の矢印ボタンのHTMLをカスタマイズ	<button type=”button” class=”slick-next”>Next</button>
centerMode	スライドを中心に表示して部分的に前後のスライドが見えるように設定（奇数番号のスライドに使用）	false
centerPadding	センターモード時のサイドパディング。見切れるスライドの幅。’px’または’％’。	50px
cssEase	CSS3アニメーションイージングを設定	ease
customPaging	dots:trueのとき、ドットをカスタマイズ	n/a
dots	ドットインジケーターの表示	false
dotsClass	ドットインジケーターのクラス名を設定	slick-dots
draggable	マウスでのドラッグ設定	true
fade	スライダーの切り替えをスライドではなくフェイドインにするか	false
focusOnSelect	クリックでのスライド切り替えを有効にするか	false
easing	jQueryアニメーションイージングを追加	linear
edgeFriction	infinite:falseのときに最初と最後のスライドをスワイプした時のフリクション値を設定	0.15
infinite	スライドのループを有効にするか	true
initialSlide	スライドの開始番号	0
lazyLoad	画像の遅延読み込みを設定（’ondemand’もしくは’progressive’）	ondemand
mobileFirst	レスポンシブの設定でモバイルの計算を優先させる	false
pauseOnFocus	自動再生時にスライドにフォーカスした際、自動再生をストップさせるか	true
pauseOnHover	自動再生時にスライドにマウスオーバーした際、自動再生をストップさせるか	true
pauseOnDotsHover	自動再生時にドットインジケーターにマウスオーバーした際、自動再生をストップさせるか	false
respondTo	レスポンシブの基準を設定（’window’もしくは’slider’もしくは’min’）	window
responsive	breakpointで設定したいブレイクポイントを設定（settingsで画面サイズがブレイクポイントで設定した範囲内になったら振り分ける処理を設定）	none
rows	スライドの行数を設定（slidesPerRowを使用して、各行に含めるスライドの数を設定）	1
slide	スライドとして使用する要素を設定	”
slidesPerRow	rowsオプションで2以上が設定されている際、各行にいくつのスライドを表示するか設定	1
slidesToShow	表示するスライド数を設定	1
slidesToScroll	スクロールするスライド数を設定	1
speed	スライド/フェードアニメーションの速度を設定	300
swipe	スワイプを有効にするか	true
swipeToSlide	slidesToScrollの設定に関係なく、ユーザーがスライドを直接ドラッグまたはスワイプした場合は1スライドずつ動かす	false
touchMove	タッチでスライドさせるか	true
touchThreshold	スワイプでスライドさせる距離を設定（1 / touchThreshold）*スライダの幅	5
useCSS	CSS traditionを有効にするか	true
useTransform	CSS transformを有効にするか	true
variableWidth	可変幅のスライド（スライドの幅をバラバラにするか）	false
vertical	垂直スライドモード	false
verticalSwiping	垂直のスワイプを有効にするか	false
rtl	スライダの方向を右から左に変更するか（right to left）	false
waitForAnimate	スライドアニメーション中にスライドを前後させる要求を無視するか	true
zIndex	スライドの重なり順	1000

イベント設定をまとめました

イベントの取得のやり方は下記になります。

$(selector).on('eventname',function(){
    //行いたい処理
});

afterChange	スライド後に発生
beforeChange	スライド前に発生
breakpoint	設定したブレークポイントの範囲内になったら発生
destroy	スライダーを解除(unslick)した時に発生
edge	infinite:falseのとき最初と最後のスライドをドラッグした時に発生
init	最初の初期化後に発生
reInit	すべての再初期化後に発生
setPosition	位置/サイズの変更後に発生
swipe	スワイプ/ドラッグ後に発生
lazyLoaded	画像遅延ロード後に発生
lazyLoadError	イメージの読み込みが失敗した後に発生