画像のカルーセルを作るといえば名前が挙げられる筆頭、slick.js。
今回は個人的に触っていて「これはどうするんだ？」と思うようなslickのテクニックを書いていきたいと思います。
そもそもslick.jsとは
slick.jsはjQueryを用いて、スライダーやカルーセルを作るためのプラグインになります。
導入方法もとても簡単で、さらに軽い動作で動くことから初心者の方でもあまり迷うことなく、直感的に触ることができるプラグインだと思っています。
基本的な使い方も、slick.jsの公式サイトを読みながらその通りに実装していくことで導入できてるのも嬉しいところ。
サイトは英語なので、翻訳しながらの導入にはなるものの、一ヶ所にまとまっているのも嬉しいところです。
https://kenwheeler.github.io/slick/
導入方法にはCDNとダウンロードをしてから読み込む方法がありますが、ここでは割愛させていただきます。
slick.js小技集
ここからは使いたての時に引っかかったもの含め小技をまとめていきます。
slick.jsは必ずjQueryの後に追加すること！
初歩的なミスですが、初めてslickを使用する際に陥ったミスです。
jQueryを用いて動かすプラグインなので、<body>タグの閉じタグ直前に記述をします。
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</body>
slick.jsは1.8.1を使用した方が安定する
slick自体は1.9.0自体は存在していたものの、公式のmasterブランチは1.8.1を挿入するようにドキュメントに記載していたり、1.9がrevertされた形跡もあることから、基本的には1.8.1を使用したほうが安定して運用することができる気がします。
そもそも、1.9.0になると挙動が変わったりする部分もあるので、安易なバージョンアップは行わない方がいいプラグインかと思っているところです。
公式のmasterブランチは下記から確認することができるので、基本的に利用前は確認することをおすすめします。
slick.js masterブランチ
使用するCMSによってはデフォルト値を記述するとおかしくなる場合がある
WordpressやHubspotなど様々なCMSで利用できるslickですが、なぜかデフォルト値を記述すると動かなくなったりする場合があります。
例えば自動再生を示すautoplayの初期値はfalseですが、これを改めて記述するとなぜかおかしくなる、ということが発生します。
CMS下で急に動かなくなった時、この仕様を一度確認したら解決が近くなるかもしれないです。
画像によって表示させる位置を変える。
画像はそのままに、表示する画像ごとにどこかにフォーカスアップして欲しいな、でも画像は切り取らないでくださいみたいな要望が来た場合につかえます。
下記は実装の一例です。
<ul class="slide">
<li class="item img_right">
<img src="slider01.png" />
</li>
<li class="item img_left">
<img src="slider02.png" />
</li>
<li class="item img_top">
<img src="slider03.png" />
</li>
<li class="item img_bottom">
<img src="slider04.png" />
</li>
<li class="item img_center">
<img src="slider05.png" />
</li>
</ul>
imageの一つ上のタグに個別でクラスを付与し、object-positionで制御する方法です。
object-positionとobject-fitはセットで記述する必要があるので、object-fitは同じだとしても必ず個別のクラスでも書いてください。
それぞれのクラスに記述をしていきます。
object-fit: cover;と記述していますが、こちらは任意で変更しても大丈夫です。こちらもobject-fitとobject-positionを組み合わせることでかなりのパターンを生み出すことが出来ちゃいます！
右方向に寄せる
.img_right {
object-fit: cover;
object-position: 100% 50%;
}
左方向に寄せる
.img_left {
object-fit: cover;
object-position: 0% 50%;
}
上方向に寄せる
.img_top {
object-fit: cover;
object-position: 50% 0%;
}
下方向に寄せる
.img_bottom {
object-fit: cover;
object-position: 50% 100%;
}
デフォルト値
.img_center {
object-fit: cover;
object-position: 50% 50%;
}
逆走してしまう
autoplayを設定したり、カルーセルをスライドして一枚目に戻るとき、逆走したり急に一枚目に高速で戻ってしまう場合、下記を編集することで修正されることが多いです。
CDNでslickを利用している場合、CDNのCSSよりも後に記述することで上書きされます。
.slick-slider div{
transition: none;
}
.slick-slide{
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
}
スライドをレスポンシブ対応に
PC画面ではカルーセルの画像を３枚表示し、スマートフォンでは１枚表示に切り替える、という事も可能です。
$(document).on('ready', function() {
$(".slick").slick({
dots: true,
infinite: false,
slidesToShow: 3,
slidesToScroll: 1,
speed: 500,
//ここからレスポンシブの記述
responsive: [{
breakpoint: 768,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
swipeToSlide: true
},
},
],
});
});
slickは更新されていないから古いか？
slickは最後の更新が数年前であり、swiperなどの他プラグインよりは古い印象を受けるかもしれません。
しかし動作が軽やかであり、実装のスピードも早められることから今でもそれなりに活用されている場面を見ます。
自動で無限に画像をスライドショー形式で見せ、逆向きにしたものと2つ並べるというおしゃれな作り方も見ることが出来ます。
また、画像ではなくフレックスボックスを並べられるというのも、個人的には強みの一つだと思っています。
ちょっとおしゃれなスライダーが欲しい、という時にslickを検討してみてはいかがでしょうか？
補足
swiperと比較すると、スマートフォンで横スライドさせる場合、画面をスワイプさせることだけを考えるとややswiperが優勢です。
ただ、手軽に実装できる点や動作の軽さからいまだにslickを愛用してしまいます。
今度はSplideなども使った感想を上げてみたいです。