slick.jsでよく作るスライダーを10種類紹介します。
デモは実際に触って動かしていただけます。
詳細な作り方はリンク先でご覧いただけます。
①ノーマルなスライダー
まずは何の変哲もないノーマルなスライダーです。
②両サイドがチラ見せなスライダー
次に来るスライドと一つ前のスライドが少し見えているスライダー。
これはいたるところで見かけますね。
③ボタン付きのスライダー
ボタンを押すとスライドが動くスライダーです。
slickスライダーに元々ついてあるドットをカスタマイズしてボタンにしています。
④矢印をカスタマイズしたスライダー
矢印を任意の画像で置き換えたスライダーです。
⑤サムネイル付きスライダー
スライドの候補がサムネとしてついているスライダーです。こちらのもよく見かけますね。
二つのスライダーを連携することで、実現しています。
⑥ダブルスライダー
メインのスライダーと連携してテキストもスライドしてくるスライダーです。
『ダブルスライダー』というのはわたしが勝手に命名しました。笑
一つ目のスライドのテキストが入ります
一つ目のスライドのテキストが入ります
一つ目のスライドのテキストが入ります
二つ目のスライドのテキストが入ります
二つ目のスライドのテキストが入ります
二つ目のスライドのテキストが入ります
三つ目のスライドのテキストが入ります
三つ目のスライドのテキストが入ります
三つ目のスライドのテキストが入ります
⑦無限ループスライダー
一定速度で無限に流れ続けるスライダーです。
⑧ドットが数字のスライダー
ドットが数字のスライダーです。
customPagingオプションを使用して実現します。
⑨ドットが上にあるスライダー
ドットが上にあるスライダーです。
slick.jsのオプションには用意されていないのすが、少しばかりのjsとcssの記述で実現できます。
⑩縦方向に動くスライダー
縦方向に動くスライダーです。
verticalオプションで実現できるのですが、見た目は自動で調整されはしないのでCSSで調整します。
以上、slick.jsでよく作るスライダーを10種類紹介しました。せひ作ってみてください！
また、こんなスライダーを作りたいけど実装方法がわからない、ということがあればお気軽にコメントでお知らせください！
コメント