slick.jsでよく作るスライダーを5種類紹介




slick.jsでよく作るスライダーを5種類紹介します。

デモは実際に触って動かしていただけます。
詳細な作り方はリンク先でご覧いただけます。


①ノーマルなスライダー

まずは何の変哲もないノーマルなスライダーです。









②両サイドがチラ見せなスライダー

次に来るスライドと一つ前のスライドが少し見えているスライダー。
これはいたるところで見かけますね。

スライダー画像
スライダー画像







③ボタン付きのスライダー

ボタンを押すとスライドが動くスライダーです。
slickスライダーに元々ついてあるドットをカスタマイズしてボタンにしています。












④サムネイル付きスライダー

スライドの候補がサムネとしてついているスライダーです。こちらのもよく見かけますね。
二つのスライダーを連携することで、実現しています。






⑤ダブルスライダー

メインのスライダーと連携してテキストもスライドしてくるスライダーです。
『ダブルスライダー』というのはわたしが勝手に命名しました。笑

一つ目のスライドのテキストが入ります
一つ目のスライドのテキストが入ります
一つ目のスライドのテキストが入ります

二つ目のスライドのテキストが入ります
二つ目のスライドのテキストが入ります
二つ目のスライドのテキストが入ります

三つ目のスライドのテキストが入ります
三つ目のスライドのテキストが入ります
三つ目のスライドのテキストが入ります





以上、slick.jsでよく作るスライダーを5種類紹介しました。せひ作ってみてください!


また、こんなスライダーを作りたいけど実装方法がわからない、ということがあればお気軽にコメントでお知らせください!

コメント

タイトルとURLをコピーしました