
スライダープラグインの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記事一覧
- コピペで使えるWordPressの各テンプレート
- 実務でよく使う見出し一覧
- 実務でよく使うテキストのhoverアニメーション
- 実務でよく使うボタン内の矢印9種類
- Contact Form 7の色々・・・
今だけ!5大無料特典あり🎁