Photoshopの「最低限これだけ覚えておけばなんとかなる！」ショートカットキー私的まとめ
さわ
IT屋さんのはしりがき
【jQuery】slickプラグインを使って垂直方向のスライダーを実装する
さわ
スライダーといえばコンテンツが左右に動く実装が定番ですが、今回は「上下に」流れるスライダーの実装メモ。
「slick」というjQueryのプラグインを使用します。
スポンサーリンク
slickの特徴
特徴
- レスポンシブ対応
- タッチデバイス対応
- オプションが豊富で、自由度の高い設定ができる
- 設定が簡単
詳細な解説やファイルのダウンロードは公式サイトをチェック!!
公式サイト
slick
slickの導入
jQueryと、公式サイトからダウンロードしたslickのファイルを設置。
<!-- headの中 -->
<link href="js/slick.css" rel="stylesheet">
<!-- slickデフォルトのスタイルからカスタマイズしたい場合は設置する（任意） -->
<link href="js/slick-theme.css" rel="stylesheet">
<!-- /bodyの直前 -->
<script src="js/jquery.min.js"></script>
<script src="js/slick.min.js"></script>もしくは、「jsDelivr」からCDNで使用することもできます。
サンプルHTML
例として、5枚の画像を垂直にスライドさせます。
まずは画像をリストで羅列。
<ul class="slick-container">
<li><img src="https://picsum.photos/300?rondom=1"></li>
<li><img src="https://picsum.photos/300?rondom=2"></li>
<li><img src="https://picsum.photos/300?rondom=3"></li>
<li><img src="https://picsum.photos/300?rondom=4"></li>
<li><img src="https://picsum.photos/300?rondom=5"></li>
</ul>スライドしたい要素（<li>）の親要素（<ul>）に、任意のクラスを振ります。
スクリプトを記述する
slickを動かすためのスクリプトを記述。
$('.slick-container').slick({
// ここにオプションを設定する
vertical: true // 垂直方向にスライドさせるためのオプション
});
これだけで、上下に動くスライダーの完成。めちゃくちゃお手軽!!
なお、オプションでautoplay: true（自動再生）を指定すると、下から上へスライドします。
まとめのデモ
上記を実装したデモ。
垂直方向へのスライドオプションのほかに、デモを見やすくするためにいくつか追加でオプションを指定しています。
See the Pen slick – vertical by さわ (@rily0486) on CodePen.
スポンサーリンク
ABOUT ME
webサイト制作をメインとして、フロントからインフラまで広くかじっているIT屋さんをやっています
