パソ君
・slickを縦方向にスライドさせる方法は？
こんな疑問にお答えします。
slickにてスライダーを作成するとき、縦方向に動かしたいときありますよね。
通常だと横方向ですが、あるコードを記述すれば縦方向に実装可能です。
簡単にできますよ！
ジト
すぐにできる！
ということで、この記事では「slickを縦方向にスライドさせる方法」について解説していきます！
この記事でわかること
slickを縦方向にスライドさせる方法
【jQuery】slickの使い方｜初心者向けに解説【レスポンシブ対応】 目次
【簡単】slickを縦方向にスライドさせる方法【コピペOK】
そんな縦方向にスライドさせたサンプルがこちら↓
See the Pen slick縦➀ by jito-coder (@jito-coder) on CodePen.
<div class="test__container">
<div class="test-slick">
<div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="" width="500" height="233"></div>
<div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="" width="500" height="233"></div>
<div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/3.png" alt="" width="500" height="233"></div>
<div class="test-slick__item"><img src="https://jito-site.com/wp-content/uploads/2023/01/4.png" alt="" width="500" height="233"></div>
</div>
</div>.slick-dots {
width: 30px;
top: 50%;
right: -30px;
bottom: auto;
transform: translateY(-50%);
}$(function () {
$(".test-slick").slick({
autoplay: true,
vertical: true,
verticalSwiping: true,
dots: true,
});
});コードの重要な点がこちら↓
- 「vertical」を「true」にする
- ドットや矢印を縦用にカスタマイズ
順に見ていきましょう。
スライドを縦方向に動かすには、オプションの「vertical」を「true」にすれば可能です。
今回の例だと下記４行目ですね↓
$(function () {
$(".test-slick").slick({
autoplay: true,
vertical: true,
verticalSwiping: true,
dots: true,
});
});これだけで縦方向にスライドさせることができます。
また「verticalSwiping」を「true」にすることで、スワイプ時にも縦に動かすことが可能になります。
あとは縦向き用に、ドットや矢印の位置などを変えればOK。
とはいえこれはデザインカンプによるので、案件ごとにカスタマイズしましょう。
今回は例として下記のようなコードを記述しました↓
.slick-dots {
width: 30px;
top: 50%;
right: -30px;
bottom: auto;
transform: translateY(-50%);
}これでスライダーの横位置にドットが反映されます。
【簡単】slickを縦方向にスライドさせる方法【コピペOK】：まとめ
- 縦方向にスライドさせるには「vertical」を「true」にする
- 縦方向にスワイプでも動かすには「verticalSwiping」を「true」にする
- あとは縦向き用にドットや矢印位置をカスタマイズ
ジト
縦方向にスライドさせるときは試してみてね！
【解説】slickのオプション一覧【カスタマイズまとめ】 
【最新】slickのスライダー実装サンプル25選【コピペOK】
