なんにもない日の頭の中はこんなもんだったりする

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

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

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

きのこさん
横幅いっぱいで、
きのこさん
並んでるスライドショーをつくってみましょう

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

今回は、仕様がわかりやすいようにスライド画像の幅は「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 イメージの読み込みが失敗した後に発生

さいごに

きのこさん
動きがあると楽しいですねー
きのこさん
オプションとイベントの設定でいろいろできますよー
いつかのこと
Web design gallery - デザインのこと - ウェブデザインあつめました。

おすすめ

Web design gallery - デザインのこと - ウェブデザインあつめました。