コーダーとして仕事を請けるようになってから、「工数1人日で1ページ、コーディングよろしく！ あ、ここのカルーセルスライダー、デザイン通りにね！（地味に凝ったデザイン）」なんて気軽に依頼されても、「了解しました〜！」と笑顔で答えなければなりません。
でも大丈夫。「slick.js」さえ使いこなせれば。
そんなわけで、「slick.js」でカルーセルスライダーを実装＆カスタマイズを色々トライしてみます。
目次
なぜ「slick.js」がいいのか
- レスポンシブ対応
- IE11でも問題なく動く
- カスタマイズ性が高い
- 王道プラグインだけあって、JavaScriptも活用した質の高い解説ブログが山ほど見つかる←重要！
slick.jsの準備
A: slick.jsをダウンロードする
公式サイトからダウンロードします。
色んなパターンのスライドが実装できまっせ〜なサンプルを上に流して流して、設置方法の説明も流して、settingの解説も流して流して、だいぶ下の方にダウンロードボタンがあります。
急ぎのときは、グロナビの「get it now」をクリックするとダウンロードボタンのところまで一気にスクロール移動できます。
解凍後、slick.min.js、slick.css、slick-theme.css、ajax-loader.gif、fontsフォルダをそれぞれ格納（UP）します。fontsフォルダはslick-theme.cssと同じ場所に格納します。
矢印ボタンのデザインをカスタマイズする場合はfontsフォルダは必要無いのですが、ここでは設置する前提で進めます。
B: slick.jsをCDNで読み込む
こちらも前述の公式サイトにCDNのリンク先が紹介されています。
ダウンロードの場合とどちらが良いかは人それぞれですので、お好みで。
読み込みリンクを記述する
ダウンロードの場合も、CDNの場合も、header内にjQuery、slick.min.js、slick.css、slick-theme.cssの読み込みを記述します。
WordPressの場合のメモ
<link rel="stylesheet" href="<!--?php echo get_stylesheet_directory_uri(); ?-->/css/slick.css">のように、関数<!--?php get_stylesheet_directory_uri(); ?-->を使用すると楽。
この関数で使用しているテーマ・子テーマのディレクトリURIを取得するので、上記のように記述すると実際は下記のようになります。
<link rel="stylesheet" href="https://ponsyon.com/wp/wp-content/themes/understrap-child/css/slick.css" />のようになる。（こちらはただの例なので、このサイトのCSSは実際そこにアップされていません）
カルーセルスライダーを実装する
一番ベーシックなスライダー
つまり何のオプションもカスタマイズもしないプレーンな状態のslick.jsのスライダーを実装してみます。
ex01: 1枚表示のスライダー（画像配置）
まずはシンプルかつベーシックなカルーセルスライダーを設置してみます。
スライドさせたい要素をdivなどで囲んで、任意のclass名を親要素に付加します。この例ではsingle-itemとします。
画像をスライドさせたい場合は、imgタグを直に置かず、divやfigureなどで囲んでください。
また、cssで.slick-slide img {width: 100%;}を設定しておいた方が後々楽です（スライド間に隙間を開けたい場合は都度調整します）。
<div class="single-item">
<figure><img src="（画像のパス）" /></figure>
<figure><img src="（画像のパス）" /></figure>
<figure><img src="（画像のパス）" /></figure>
</div>続いてjQueryの記述もします。先ほど親要素に付けたclass名にslick.jsを反映させます。
（記述する場所はhead内でも閉じbodyタグ直前でも構わないようです）
$(function() {
$('.single-item').slick();
});デフォルトでは左右の矢印アイコンはcolor:#fff;が指定されています。白背景の場合、見えなくなってしまうため、ここでは.slick-prev:before, .slick-next:before {color: #000;}を当てています。
1枚表示のスライダー（画像配置）のデモ
ex02: 1枚表示のスライダー（div要素配置）
もちろん画像ではなくdiv要素をスライドさせることもできます。
上記のシンプルなスライダーを画像ではなくdiv要素に変更してみましょう（親要素のclass名はそのままにしてます）。
<div class="single-item">
<div class="card"><p>1</p></div>
<div class="card"><p>2</p></div>
<div class="card"><p>3</p></div>
</div>cssでスライドさせるdiv要素にstyleを当てます。
.single-item .card {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 300px;
background: #fff;
}
.single-item .card p {
font-size: 2rem;
}jQueryの記述は割愛します。
1枚表示のスライダー（div要素配置）のデモ
ex02′: キャプション付きのスライド
divでスライドできるんだからキャプションも表示してスライドさせることだってできますよね。ここではfigureタグとfigcaptionタグでキャプション付きのスライドを作成してみました。
<div class="caption">
<figure><img src="（画像のパス）" /><figcaption>キャプションテキスト</figcaption></figure>
<figure><img src="（画像のパス）" /><figcaption>キャプションテキスト</figcaption></figure>
<figure><img src="（画像のパス）" /><figcaption>キャプションテキスト</figcaption></figure>
</div>今回は特にcssで調整していません。
jQueryの記述は割愛します。
キャプション付きのスライド
オプションを使ってカスタマイズする
先ほどの例そのままを本番で使う機会はほぼ無いと思われます。
「自動スライドにしたい」
「スライドの下にドットを付けたい」
「スライドの下にサムネイルを並べたい」
「左右のスライドもチラ見せして、スライドだと分かりやすくしたい」
「複数のスライドを表示させたい」
「左右の矢印を非表示にしたい」
「左右の矢印をオリジナルの画像に変更したい」
「画面幅によって表示させるスライドの数を変えたい」
「レスポンシブでもスライド間の間隔を統一したい」
……などなど、要望が浮かびますよね。
ここからはslick.jsに付いているオプションを使用してカスタマイズしていきます。
オプション一覧
全部をざっとまとめてみます。使用頻度の高いもの（※が付いているもの）を使いこなせるようになればいいと思います。
| オプション名 | default | 説明 |
|---|---|---|
| accessibility | TRUE | tabキーで「次へ」「前へ」ボタン（矢印アイコン）をfocusしたときに、キーボードの左右ボタンで画像の切り替えを可能にするかどうか。 |
| adaptiveHeight | FALSE | スライダーの高さを現在のスライドに合わせる。 スライドごとに高さが異なるときに使用する。 |
| autoplay※ | FALSE | 自動再生するかどうか。 |
| autoplaySpeed※ | 3000 | 自動再生時、切り替えまでの表示時間。 |
| arrows※ | TRUE | 左右に「次へ」「前へ」ボタン（矢印アイコン）を表示するかどうか。 |
| asNavFor※ | null | ページ内の他のスライドとセットで動作させたい場合、class名を記載。 スライド下にサムネイル表示させたい場合に、このオプションを使用して大きなスライドと小さなスライドをセットで動かします。 |
| appendArrows | $(element) | 「次へ」「前へ」ボタン（矢印アイコン）の配置する位置を変更する。 (Selector, htmlString, Array, Element, jQuery object) |
| appendDots | $(element) | ドット（ページ送り）の配置する位置を変更する。 (Selector, htmlString, Array, Element, jQuery object) |
| prevArrow | <button type=”button” class=”slick-prev”>Previous | 「前へ」ボタンのhtmlの記述を指定。 |
| nextArrow | <button type=”button” class=”slick-next”>Next | 「次へ」ボタンのhtmlの記述を指定。 |
| centerMode | FALSE | 表示中のスライドを中央揃えにするかどうか。 ‘slidesToShow’オプション（表示するスライドの指定）を奇数にして使用します。 |
| centerPadding | ’50px’ | センターモードの時、スライドのpaddingを指定する（pxか%で指定）。 |
| cssEase | ‘ease’ | 切り替え時のアニメーション効果。ease, linear, ease-in, ease-out, ease-in-outから指定する。 |
| customPaging | n/a | ドット（ページ送り）の変更（※cssで調整した方が簡単）。 |
| dots※ | FALSE | スライド下のドット（ページ送り）を表示するかどうか。 |
| dotsClass | ‘slick-dots’ | ドット（ページ送り）に付加するclass名。 |
| draggable | TRUE | ドラッグができるかどうか。 |
| fade | FALSE | スライド切り替え時のフェードイン処理をするかどうか。 |
| focusOnSelect | FALSE | クリックした要素のfocusを有効にするかどうか。 |
| easing | ‘linear’ | easingを指定。 |
| edgeFriction | 0.15 | スライダーがループではない場合、一番端のスライダーを引っ張ったときのバウンド処理までの時間。 |
| infinite | TRUE | スライドをループにするかどうか。最後のスライドの次は最初のスライドが表示される。 |
| initialSlide | 0 | 最初のスライダーの位置（デフォルト値が’0’なので1枚目からのスタートとなる）。 |
| lazyLoad | ‘ondemand’ | 画像の読み込むタイミングの指定。‘ondemand’はスライドした時に画像読み込み、’progressive’はページ読み込みが完了後に画像読み込みが開始される。 この指定を使う場合、imgタグでの画像の指定をsrc=”（画像パス）”ではなく、data-lazy=”（画像パス）”と記述する。 |
| mobileFirst | FALSE | ‘responsive’オプション設定時にmobileFirst’をtrueにすると、breakpointの一番幅が狭いものの設定を反映させる。 |
| pauseOnFocus | TRUE | 自動再生時、スライドエリアにfocusで一時停止するかどうか。 |
| pauseOnHover | TRUE | 自動再生時、スライドエリアにhoverで一時停止するかどうか。 |
| pauseOnDotsHover | FALSE | 自動再生時、ドット（ページ送り）にhoverで一時停止するかどうか。 |
| respondTo | ‘window’ | ‘responsive’オプション設定時に、blackpointの基準となる要素を指定する。’window’がブラウザ幅、’slider’がスライダーの幅、’min’の場合は’window’と’slider’のより小さい方。 |
| responsive※ | none | breakpointを指定して、画面幅がbreakpoint以下の時のオプションを設定できる。 |
| rows | 1 | 1以上に設定するとグリッドモードで初期化される。’slidesPerRow’オプションで各行ごとのスライド数を指定することができる。 |
| slide | ” | スライドさせる要素のクエリを指定する（特定のclassが付いた要素のみスライドさせるなど）。 |
| slidesPerRow | 1 | ‘rowsオプション設定時、各行ごとのスライド数の指定。 |
| slidesToShow※ | 1 | スライドのエリアに画像がいくつ表示されるかを指定。 |
| slidesToScroll※ | 1 | 一度のスライドで切り替わるスライダーの数。 |
| speed | 300 | スライドが切り替わる際のスピード。 |
| swipe | TRUE | タッチスワイプに対応するかどうか。 |
| swipeToSlide | TRUE | ‘slidesToScroll’オプションで設定した数値に関わらず、スワイプでスライドできるようにするかどうか（3枚ずつスライドする設定でも、スワイプで一枚ずつスライドできるようにするなど）。 |
| touchMove | TRUE | タッチ操作でスライドの移動を有効にするかどうか。 |
| touchThreshold | 5 | スワイプでスライドを移動させるために必要な距離を指定。 (1/touchThreshold)*スライダ幅、という計算になる。初期値の’5’の場合、スワイプするためにスライド幅の1/5スワイプする必要がある。’2’にした場合はスライド幅の1/2スワイプする必要がある。 |
| useCSS | TRUE | CSS transitionを有効にするかどうか。 |
| useTransform | TRUE | CSS transformを有効にするかどうか。 |
| variableWidth | FALSE | スライド幅の自動計算を有効にするかどうか。 本来はスライドの幅が異なる場合にスライド自体の幅を固定させる用途だが、レスポンシブ時にブラウザ幅＆スライダー幅が可変してもスライド自体の幅を変えたくない場合にも使える。 |
| vertical | FALSE | 縦方向スライドモード。 |
| verticalSwiping | FALSE | 縦方向のスワイプを有効にするかどうか。 |
| rtl | FALSE | スライドする方向を右から左に変更するかどうか。 |
| waitForAnimate | TRUE | スライドアニメーション実行中にスライド移動のリクエストに応じるかどうか。 |
| zIndex | 1000 | スライドのz-indexを設定できる。IE9以下で便利。 |
下記リンクは、slick.jsのドキュメントを日本語翻訳しているサイトで、各オプションをデモを交えて丁寧に詳細に解説されています。
上の表がいらないレベルなんですが、作ることで勉強になったのでいいんです……。
slickドキュメント翻訳 | slick - にほんご
カスタマイズ例
さて、オプション設定でのカスタマイズ例を列挙していきます。
ex03: スライダーを自動再生させる
今回は他のデモと分けるために親要素のclassに.autoplayを付加して進めます。
jQueryの記述にautoplay: true,を付け加えます。
$(function() {
$('.autoplay').slick({
autoplay: true,
});
});スライダーを自動再生させるデモ
これ以降の例は、自動再生の設定をしたもので進めます。
ex04: スクロール切り替えではなくフェード切り替えにする
今回は例で親要素のclass名を.fadeとします。
jQueryの記述にautoplay: true,を付け加えます。
$(function() {
$('.fade').slick({
autoplay: true,
fade: true,
});
});フェード切り替えのデモ
ex05: 複数枚のスライドを同時に表示させる
今回は例で親要素のclass名を.multiple-itemsとします。
jQueryの記述にslidesToShow: 3,を付け加えます（数値は任意です。表示させたい数を入力してください）。
$(function() {
$('.multiple-items').slick({
autoplay: true,
slidesToShow: 3
});
});複数枚のスライドを同時に表示させるデモ
ex06: スライドを数枚ずつスクロールさせる
複数表示させた場合など、一枚一枚スライドさせずに表示されている複数のスライドをまとめてスライドさせたい場合。
今回は例で親要素のclass名を.data-slickとします。
前述「ex05: 複数枚のスライドを同時に表示させる」を流用して以下付け加えます。jQueryの記述にslidesToShow: 3, slidesToScroll: 3,を付け加えます（数値は任意です。slidesToShowに表示させたい数、slidesToScrollに一度にスライドさせたい数を入力してください）。
$(function() {
$('.data-slick').slick({
autoplay: true,
slidesToShow: 3,
slidesToScroll: 3,
});
});スライドを数枚ずつスクロールさせるデモ
ex07: 流れるようにスムーズにスクロールさせる
これまではスライドごとにスクロールされていましたが、自然に流れててほしいときだってあります。
今回は例で親要素のclass名を.smoothとします。
前述「ex05: 複数枚のスライドを同時に表示させる」を流用して以下付け加えます。jQueryの記述にslidesToShow: 3, cssEase: 'linear',を付け加えます（数値は任意です。slidesToShowに表示させたい数、slidesToScrollに一度にスライドさせたい数を入力してください）。
$(function() {
$('.smooth').slick({
autoplay: true,
slidesToShow: 3,
autoplaySpeed: 0,
cssEase: 'linear',
speed: 5000,
});
});流れるようにスムーズにスクロールさせるデモ
ex08: 左右の「前へ」「次へ」ボタンを非表示にする
今回は例で親要素のclass名を.no-navとします。
jQueryの記述にarrows: false,を付け加えるだけです。
$(function() {
$('.no-nav').slick({
arrows: false,
});
});左右の「前へ」「次へ」ボタンを非表示にするデモ
ex09: スライダーの下にページ送りのドットを表示させる
今回は例で親要素のclass名を.dotsとします。
jQueryの記述にdots: true,を付け加えます（なぜかデフォルトではfalseで非表示なのです）。
$(function() {
$('.dots').slick({
dots: true,
});
});スライダーの下にページ送りのドットを表示させるデモ
ex10: スライド画像の読み込みタイミングを調整する
今回は例で親要素のclass名を.lazyとします。
jQueryの記述にlazyLoad: 'ondemand',、あるいはlazyLoad: 'progressive',を付け加えます。ondemandはスライドしたタイミングで画像を読み込みます。progressiveはページ読み込み完了後に画像を読み込みます。どちらも最初に表示されているスライドは普通にページ読み込みのタイミングで読み込まれます。
このオプションを使用する際は、画像のURL指定をsrc=""からdata-lazy=""にする必要があります。
<div class="lazy">
<figure><img data-lazy="（画像のパス）" /></figure>
<figure><img data-lazy="（画像のパス）" /></figure>
<figure><img data-lazy="（画像のパス）" /></figure>
</div>ここではimgタグをfigureタグで囲んでますが、もちろんdivタグで囲んでも構いません。
$(function() {
$('.lazy').slick({
lazyLoad: 'ondemand',
});
});スライド画像の読み込みタイミングを調整するデモ
ex11: 前後のスライドをちょい見せしたい
1枚だけバーンと、3枚ずつピシッとではなく、両脇に前後のスライドを覗かせたいときってありますよね。
今回は例で親要素のclassに.single-center-paddingを付加して進めます。
jQueryの記述にcenterPadding: '', centerMode: true,を付け加えます。centerPaddingの''の中には前後のスライドをどの程度見せたいか、幅の数値を入れます。
また、スライドさせる画像はwidth: 100%,等として親要素.slick-slideの幅に添うようにしておきます。こうすることで、単純な可変スライダーにもなります。
$(function() {
$('.center-padding').slick({
centerMode: true,
centerPadding: '60px',
slidesToShow: 1,
});
});前後のスライドをちょい見せ
センター寄せじゃなくて左寄せにしときたいこともあるかもしれない。
そんな時はCSSでimgにmargin-leftをcenterPadding: '60px',の分、マイナスに設定して調整かな。
後のスライドをちょい見せしつつ左寄せ
左右にちょい見せされているスライドを半透明にしたい場合もありますね。
簡単な方法としてCSSでcurrentされるスライド以外をopacityで半透明に設定する手があります。
ちょい見せの前後のスライドを薄くしたい
ex12: レスポンシブ（ブレイクポイントで表示を切り替える）
ブラウザ幅によってスライドの表示枚数を変えたい、dotを消したい、などの調整の仕方です。
今回は例で親要素のclassに.responsiveを付加して進めます。
jQueryの記述にresponsive: でブレイクポイントごとの記述を付け加えます。
$(function() {
$('.responsive').slick({
dots: true,
centerMode: true,
centerPadding: '60px',
slidesToShow: 5,
responsive: [
{
breakpoint: 640,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 3
}
},
{
breakpoint: 480,
settings: {
arrows: false,
centerMode: true,
centerPadding: '40px',
slidesToShow: 1
}
}
]
});
});レスポンシブのデモ
ex13: サムネイル付きスライダーにしたい（2つのスライダーを連動させる）
メインのスライダーは大きく見せて、小さいサムネイルのスライダーを下に複数表示させることで前後のスライダーも内容も見せておきたい。オンラインショップのサイトでよく見るパターンです。
オプションで対応するには、2つのスライダーを連動させることでサムネイル付きのような形にします。
今回は例で大きなスライダーの親要素のclassに.slider-for、小さなスライダーの親要素のclassに.slider-navを付加して進めます。
<div class="slider-for" style="margin-bottom: 10px;">
<figure><img src="（画像のパス）" /></figure>
<figure><img src="（画像のパス）" /></figure>
<figure><img src="（画像のパス）" /></figure>
<figure><img src="（画像のパス）" /></figure>
<figure><img src="（画像のパス）" /></figure>
<figure><img src="（画像のパス）" /></figure>
<figure><img src="（画像のパス）" /></figure>
</div>
<div class="slider-nav">
<figure><img src="（画像のパス）" /></figure>
<figure><img src="（画像のパス）" /></figure>
<figure><img src="（画像のパス）" /></figure>
<figure><img src="（画像のパス）" /></figure>
<figure><img src="（画像のパス）" /></figure>
<figure><img src="（画像のパス）" /></figure>
<figure><img src="（画像のパス）" /></figure>
</div>jQueryの記述にasNavFor: '',の''の中に連動させたいスライダーのclassをそれぞれ記述します。
$(function() {
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
focusOnSelect: true,
});
});2つのスライダーを連動させるデモ
サムネイル付きスライダー、他のアレンジ参考リンク
「2つのスライダーを連動させるとHTMLが煩雑になる」「更新時にややこしくしたくない」という場合は、ちょっと高度になりますがjQueryの方で記述を頑張ると良いです。
1つのスライダーで、dotの部分に画像を配置させる方法です。下記nxworldさんの記事を参考になさってください。
このやり方だと、サムネイル側のスライダーをスクロールさせたくない場合にも良いです。
こちらは、2つのスライダーを連動させるけど、サムネイル側のスライダーのスクロールをさせない技。jsの記述を追加してslick.jsのスクロールを止める。
こちらも、2つのスライダーを連動させるけど、サムネイル側のスライド機能を無くして、メインのスライダーとの連動だけさせる技。infinite: false;を使用するので、素直なループはしないようですが。
ex14: スライドの幅を固定してブラウザ幅で切れて欲しい場合のレスポンシブ
breakpointで調整するんじゃなく、どのブラウザ幅でもスライドの大きさは変えずに、勝手に左右切れてほしい。そんな場合。
今回は例で親要素のclassに.responsive-slide-widthを付加して進めます。
cssでスライドの幅をwidth:300px;にします。
jQueryの記述にinfinite: true, centerMode: true, centerPadding: '0', variableWidth: true,の合わせ技で対応できました。
初期表示でスライドの左端が表示されていないなど微妙に不具合があるのですが、ページの下部に置いておく場合は、そこにたどり着くまえにスライドが進むので問題ないと思います。
が、研究します！
$(function() {
$('.responsive-slide-width').slick({
autoplay: true,
infinite: true,
centerMode: true,
centerPadding: '0',
variableWidth: true,
arrows: false,
dots: true,
});
});レスポンシブ（スライドの幅を固定する場合）のデモ
ex15: ドットのカスタマイズ（CSSで無理やり）
slick.jsオプションのdotsClassでドットにオリジナルのclass名を付加して編集するとスマートなのですが、付加しないで強引にCSSでデザイン上書きすることもできます。
ドットのカスタマイズ（CSSで無理やり）のデモ
私のデモページでは強引な上書きでやっていますが、スマートなやり方は以下のサイトをご参照ください。
https://tr.you84815.space/slick/settings/dotsClass.html
ex16: 左右の「前へ」「次へ」ボタンをカスタマイズ（文字置き換え）
デフォルトでslickで用意された矢印アイコンが表示されていますが、これをオプションのprevArrownextArrowで書き換えます。
書き換えた後は位置調整が必要になるので、オリジナルのclass名を付加してCSSで調整します。
$(function() {
$('.arrow-text').slick({
autoplay: true,
dots: false,
prevArrow: '<span class="slick-arrow_prev">←</span>',
nextArrow: '<span class="slick-arrow_next">→</span>',
});
});↓一例です。
.arrow-text .slick-arrow_prev,
.arrow-text .slick-arrow_next {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 1.5rem;
cursor: pointer;
z-index: 10;
}
.arrow-text .slick-arrow_prev {
left: 10px;
}
.arrow-text .slick-arrow_next {
right: 10px;
}左右の「前へ」「次へ」ボタンをカスタマイズ（文字置き換え）のデモ
ex17: 左右の「前へ」「次へ」ボタンをカスタマイズ（画像置き換え）
今度は画像に置き換えてみます。
先ほどの文字置き換えと同様にオプションのprevArrownextArrowを使用しますが、今回はimgタグを記述します。
$(function() {
$('.arrow-text').slick({
autoplay: true,
dots: false,
prevArrow: '<img src="/images/icon-slick-prev.svg" class="slick-arrow_prev" width="50px" height="auto">',
nextArrow: '<img src="/images/icon-slick-next.svg" class="slick-arrow_next" width="50px" height="auto">',
});
});左右の「前へ」「次へ」ボタンをカスタマイズ（画像置き換え）のデモ
ex18: background-imageで画像を配置（画面幅100%、高さ固定でトリミング）
レスポンシブ対応の場合、HTML上で画像を配置するより、CSSで背景画像として配置した方が各ブラウザで表示崩れが発生しずらくなったりします。
slideの親要素にスライドごとのclass名を付加し、background-imageで画像を指定します。
<div class="background-image">
<figure class="figure-slide-01"></figure>
<figure class="figure-slide-02"></figure>
<figure class="figure-slide-03"></figure>
</div>ご覧のとおり、HTMLはとてもシンプルになりました。
上記の親要素、スライドごとのclassに対して、トリミング、配置位置の調整をCSSで記述します。
.background-image figure {
width: 100%;
height: 250px;
overflow: hidden;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.background-image figure.figure-slide-01 {
background-image: url(/wp/wp-content/uploads/2019/05/thumb_ps.png);
}
.background-image figure.figure-slide-02 {
background-image: url(/wp/wp-content/uploads/2019/05/thumb_xd.png);
}
.background-image figure.figure-slide-03 {
background-image: url(/wp/wp-content/uploads/2019/05/thumb_dw.png);
}background-imageで画像を配置のデモ
ex19: 縦方向スライド
上のキャプチャ、分かりずらいのですが縦スクロールしている途中のイメージです。
縦方向にスライドさせたい場合、オプションのverticalをtrueにします。
なぜかデフォルトのslick.cssで縦型スライドの場合、スライドにborderが1px指定されているので、上書きでborder: none;にしました。
縦方向スライドのデモ
ex20: ECサイトっぽいサムネが縦に並んだスライド
最近はあまり見かけなくなりましたが、デパートなどのECサイトによく設置されていたスライドです。表示されていないスライドのサムネイルも見せて訴求したい場合に使われています。
「ex13: サムネイル付きスライダーにしたい（2つのスライダーを連動させる）」のサムネ側のスライダーを、「ex19: 縦方向スライド」のようにオプションのverticalをtrueで縦に配置します。また、そのままだとサムネ側のスライダーが上下中央揃えになってしまって前後が途中で切れてしまうため、「ex11: 前後のスライドをちょい見せしたい」の「後のスライドをちょい見せしつつ左寄せ」のアレンジでサムネ側スライド画像にmargin-topでマイナス、その分margin-bottobでプラスして調整しています。
スライド画像の縦横比を計算してちょうど収まるようにする必要がありますね。
スマホの画面サイズだと見映えがあまりよくないので、サムネ側を非表示にするなど見せ方を考える必要があるかもしれません（デモページではそこら辺対応してません）。
<div class="ec-slider-wrap">
<div class="ec-slider-for">
<figure><img src="（画像のパス）" width="" height="" alt=""/></figure>
<figure><img src="（画像のパス）" width="" height="" alt=""/></figure>
<figure><img src="（画像のパス）" width="" height="" alt=""/></figure>
</div>
<div class="ec-slider-nav">
<figure><img src="（画像のパス）" width="" height="" alt=""/></figure>
<figure><img src="（画像のパス）" width="" height="" alt=""/></figure>
<figure><img src="（画像のパス）" width="" height="" alt=""/></figure>
</div>
</div>.ec-slider-wrap {
display: flex;
}
.ec-slider-wrap .ec-slider-for {
width: 75%;
}
.ec-slider-wrap .ec-slider-nav {
width: 25%;
}
.ec-slider-nav.slick-vertical .slick-slide {
border: none;
margin-top: -50px;
margin-bottom: 50px;
}$(function() {
$('.ec-slider-for').slick({
autoplay: true,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.ec-slider-nav'
});
$('.ec-slider-nav').slick({
arrows: false,
slidesToShow: 2,
slidesToScroll: 1,
asNavFor: '.ec-slider-for',
vertical: true,
verticalSwiping: true,
centerMode: true,
focusOnSelect: true,
});
});ECサイトっぽいサムネが縦に並んだスライドのデモ
ex21: プログレスバーを設置する
「スライドの下に表示時間をメーターで表示したい」、そんな要望をデザイナーから出されることもあります。
slickのオプションにはプログレスバーの設定がありません。そのため、プログレスバーを設置したい場合、HTMLでスライダーの下にバーのベースとなる要素を配置→CSSで装飾→javaScriptで動きを記述する必要があります。
参考：Slick Progressbar | Codepen
プログレスバーを設置したスライドのデモ
ex24: 左右交互にスライド方向を変える
スライドの流れる向きを反対方向にすることもできます。それだけだと何なので、左右交互にスライドの向きを変えるデモを作ってみます。
（コンテンツの背景で時々見かけますね。slickを使わなくても実装できるのですが、他の箇所ですでにslickスライドを使ってる場合など読み込み済みのslick.jsを流用する手もありますね。）
ここでは横長の画像を用意し、その同じ画像を2枚のスライド画像として設置ループさせています。
左方向に流れるスライドA.left-right01、右方向に流れるスライドB.left-right02、左方向に流れるスライドC.left-right01と3つのslickスライドを積み重ねました。
逆方向（左→右）のスライドはscriptにrtl: true,を記述しますが、これだけでは動作しません。スライドの親要素にdir="rtl"を加える必要があります。
また、speedをゆっくりにしてあげないと、見てて酔います。
下記HTMLおよびCSSはあくまで例として（実装の際は調整が必要かと）。
<div class="left-right01">
<figure><img src="（画像のパス）" /></figure>
<figure><img src="（画像のパス）" /></figure>
</div>
<div class="left-right02" dir="rtl">
<figure><img src="（画像のパス）" /></figure>
<figure><img src="（画像のパス）" /></figure>
</div>
<div class="left-right01">
<figure><img src="（画像のパス）" /></figure>
<figure><img src="（画像のパス）" /></figure>
</div>.left-right01,
.left-right02 {
margin-bottom: 20px;
}
#demo-slick .left-right01 .slick-track,
#demo-slick .left-right02 .slick-track {
height: 150px;
overflow: hidden;
}
#demo-slick .left-right01 .slick-slide,
#demo-slick .left-right02 .slick-slide {
width: 3400px !important;
}
#demo-slick .left-right01 .slick-slide img,
#demo-slick .left-right02 .slick-slide img {
width: 3400px;
}$(function() {
$('.left-right01').slick({
autoplay: true,
cssEase: 'linear',
speed: 50000,
autoplaySpeed: 0,
arrows: false,
});
$('.left-right02').slick({
autoplay: true,
rtl: true,
cssEase: 'linear',
speed: 50000,
autoplaySpeed: 0,
arrows: false,
});
});ex24: 左右交互にスライド方向を変える
slickを使わずCSSで実装したデモページも作ってみました。ご参考までに。
CSSで調整できること
Chromeの検証モードで変更したい要素のCSSの状況を見ながら調整していきましょう。
- ページ読み込み時に一瞬スライドが縦に並んでしまうのを防ぐ（厳密には縦に並んでしまう一瞬をスライド非表示にしてかわす）
- 中央のスライダー以外を半透明などにする
- 「前へ」「次へ」ボタンの位置＆サイズ
- 無理やりですがページ送りのdotsの形状
ページ読み込み時の表示崩れをCSSで調整する方法は、下記サイトを参照してください。
ex22: センターモードで中央のスライドだけ大きく
CSSでtransform: scale;、角丸やshadowを組み合わせることで、スライドの表情も変わってきます。
HTMLやscriptは特段変わったことをしてないため、CSSの例だけ。
.centermode .slick-slide {
transform: scale(.85);
transition: 0.3s all;
}
.centermode .slick-slide.slick-center {
transform: scale(1);
}
.centermode .slick-slide img {
border-radius: 20px;
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, .2);
margin-bottom: 20px;
transition: 0.3s all;
}
.centermode .slick-slide.slick-center img {
box-shadow:
0px 1px 3px 0px rgba(0, 0, 0, .15),
0px 3px 12px 0px rgba(0, 0, 0, .1),
0px 5px 25px 0px rgba(0, 0, 0, .06);
}ここではセンターモード前提なため、.slick-slide.slick-centerで中央のスライドを指定していますが、.slick-slide.slick-currentの方が一般的かもしれません。
このように中央のスライドとそれ以外を指定分けすることで、他にもfilter: grayscale()でモノトーンにするなど様々なアレンジができます。
ex22: センターモードで中央のスライドだけ大きくのデモ
ex23: スライドにエフェクトをかける（ズーム）
HTMLと「ex03: スライダーを自動再生させる」とほぼ同じですが、一枚目のスライド.slick-slide内のimgに.first-slideを付加しています。
scriptはspeed: 1000,を追記しゆっくりめのスピードにしています。
.effect-zoom {
position: relative;
width: 100%;
}
.effect-zoom::before {
content:'';
display: block;
padding-top: 50%;
}
.effect-zoom .slick-list {
position: absolute;
width: 100%;
height: 100%;
top:0;
left: 0;
}
.effect-zoom .slick-list .slick-track {
height: 100%;
}
.effect-zoom .slick-list .slick-slide {
width: 100%;
height: 100%;
overflow: hidden;
}
.effect-zoom .slick-list .slick-slide img,
.effect-zoom .slick-list .slick-slide img.first-slide {
transform: scale(1.0);
transition: 5s linear;
}
.effect-zoom .slick-list .slick-slide.slick-current img {
transform: scale(1.2);
}ざっくり説明をすると、.slick-slideにoverflow: hidden;をかけておき、カレント時の.slick-slide.slick-currentの中のimgにtransform: scale();で拡大をかけます。スライドの切り替えスピードに合わせてtransition: 5s linear;を調整します。
試行錯誤したので無駄な記述があるかもしれません。このCSSはあくまで例ですので、調整してくださいね。
ex23: スライドにエフェクトをかける（ズーム）
モーダルやタブの中にslickスライダーを設置する場合
jsあるいはjQueryを使ってモーダルやタブなど表示切り替えた先にslickスライダーを設置したいとします。
基本的にそれぞれのコンテンツ内に設置するだけなのであまり悩まず設置できます。しかし！ 切り替えた瞬間なぜかスライダーが表示崩れを起こしてしまう事案が発生してしまいました。
ケース1： width:0;の状態で開いてしまい、配置したい箇所から50%右にはみ出してしまう。
ケース2： スライドの初期表示がwidth:0; height:1;となり実質非表示となってしまう。
ケース2のデモ
ひとつスライドが進むと普通の状態になってくれますが、クライアントやサイトの訪問者に「一枚目のスライド表示時は崩れてますが気にしないでください」なんてとてもじゃないけど言えませんよね。
悪いのはdisplay:none;。いや、実際に悪さしているかは謎ですが、タブやモーダルの中に仕込んでいてdisplay:none;の状態からだとslickがバグってしまうようです。
ここで解決の鍵となるのがsetPositionです。
解決策
分からないことはググります。上記のサイト、詳しくて勉強になるのですが、JSをあまり詳しくないため自分のデモにうまく適応させられませんでした😞
詳しい人が見たら即解決すると思われるので、参考になさってください。
さらに検索して、上記のページで解決しました。時間差で
setPositionを発火させています。
解決したデモ