Swiperで縦方向にスライドさせるにはどうすればいい？
スライダープラグインのSwiperを使ったスライダーですが、JavaScriptに1行オプションを書くだけで実装出来ます。
今回はデモと一緒に実装する方法をご紹介していきます。
Swiperの基本的な使い方についてはこちらの記事を参照下さい。
参考記事
-
【jQuery不要】スライダープラグイン Swiper.jsの使い方
続きを見る
今だけ！5大無料特典あり🎁
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記事一覧
コーディングの時給と作業効率を上げる！
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
- コピペで使えるWordPressの各テンプレート
- 実務でよく使う見出し一覧
- 実務でよく使うテキストのhoverアニメーション
- 実務でよく使うボタン内の矢印9種類
- Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短＝時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
740部以上販売し、レビューは410件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇
今だけ！5大無料特典あり🎁
