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




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

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


①ノーマルなスライダー

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









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

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

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







connaiconnai

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

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

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












④矢印をカスタマイズしたスライダー

矢印を任意の画像で置き換えたスライダーです。







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

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







⑥ダブルスライダー

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

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

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

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







⑦無限ループスライダー

一定速度で無限に流れ続けるスライダーです。








⑧ドットが数字のスライダー

ドットが数字のスライダーです。
customPagingオプションを使用して実現します。






⑨ドットが上にあるスライダー

ドットが上にあるスライダーです。
slick.jsのオプションには用意されていないのすが、少しばかりのjsとcssの記述で実現できます。








⑩縦方向に動くスライダー

縦方向に動くスライダーです。
verticalオプションで実現できるのですが、見た目は自動で調整されはしないのでCSSで調整します。






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


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

コメント

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