皆さま引き続きコロナには気をつけてお過ごしください!

【WordPress】slickスライダーを使って、おしゃれに表示しよう

WordPress

参考~オプション項目~

オプション項目 内容 初期値
accessibility タブと矢印キーのナビゲーション true
adaptiveHeight スライドの高さ自動調整 false
autoplay 自動的にスライドを変えるか(true/false) false
autoplaySpeed 自動的にスライドを変えるタイミング(ミリ秒指定) 3000
arrows ナビゲーション用矢印を表示するか(true/false) 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 ドットインジケーターを表示するか(true/false) 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 スライダの方向を右から左に変更するか false
waitForAnimate スライドアニメーション中にスライドを前後させる要求を無視するか true
zIndex スライドの重なり順 1000
タイトルとURLをコピーしました