スライダープラグインのSwiperを使ったスライダーですが、JavaScriptに1行オプションを書くだけで実装出来ます。
今回はデモと一緒に実装する方法をご紹介していきます。
Swiperの基本的な使い方についてはこちらの記事を参照下さい。
【jQuery不要】スライダープラグイン Swiper.jsの使い方
効率よくコーディングしたい人はこちら
Swiperでスライダーを縦方向にスライドさせる方法
基本的な使い方は最初にご紹介した記事に書いてありますが、デモをご覧下さい。
See the Pen
Swiper（矢印、ドットインジケーター） by junpei (@junpei-sugiyama)
on CodePen.
この通常のスライダーのJavaScriptはこちらです。
const swiper = new Swiper(".swiper", {
loop: true,
// ページネーション
pagination: {
el: ".swiper-pagination",
},
// 前後の矢印
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});ここに縦方向にするためのコードを1行追加します。
const swiper = new Swiper(".swiper", {
direction: "vertical", // 縦方向
loop: true,
// ページネーション
pagination: {
el: ".swiper-pagination",
},
// 前後の矢印
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});一番上にある direction: "vertical", ですね（カンマを忘れずに）
あとは以下のCSSで矢印の位置を左右から上下に変えています。
.swiper-button-prev {
left: 50%;
margin: 0;
top: 0;
transform: translate(-50%, 0px) rotate(90deg);
}
.swiper-button-next {
bottom: 0;
left: 50%;
margin: 0;
top: auto;
transform: translate(-50%, 0px) rotate(90deg);
}スクロールバーとドットインジケーターについては自動で右側になります（矢印も自動で上下になればいいのに・・・）
そしてこちらが縦方向にした完成形になります。
See the Pen
Swiper（縦方向） by junpei (@junpei-sugiyama)
on CodePen.
あとは画像の高さなどをCSSで調整すればOKです。
以上になります。
スライドを縦にするだけであればJavaScriptにコードを1行追加すれば大丈夫ですが、前後の矢印の位置はCSSで調整しないと左右のままなのでご注意ください。
関連記事slick関連記事
関連記事Swiper関連記事
関連記事スライダー関連記事
Brain総合ランキング1位獲得 ＆ 3日で500部突破 累計670部突破 クチコミ約370件 今だけ！5つの無料特典あり🎁 👇画像をクリックコーディング案件の単価と作業効率を上げる！
（平均スコア）
