当記事ではswiper.jsを使用して、縦方向に動くスライダーを作成する方法を記します。
また、ナビゲーションとページネーションを縦向きにする方法についても記します。
通常のSwiper.jsでのスライダーの作成はご存じの前提で進めさせていただきますので、Swiper.jsを初めて使う方はこちらから先に参考いただければと思います。
Swiper.jsでスライダーを実装する
①通常のSwiperスライダーを作成
わかりやすいように、最初に通常のSwiperスライダーを作成して、そこから変更を加えていきます。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<style>
.sample-slider{
width: 42vw;
height: 23vw;
}
.sample-slider img{
width:100%;
}
</style>
<div class="swiper sample-slider">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/sample1.png"></div>
<div class="swiper-slide"><img src="img/sample2.png"></div>
<div class="swiper-slide"><img src="img/sample3.png"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
const swiper = new Swiper('.sample-slider', {
loop: true, //ループ
autoplay: { //自動再生
delay: 2000,
},
pagination: { //ページネーション（ドット）
el: '.swiper-pagination',
},
navigation: { //ナビゲーション（矢印）
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
</script>通常のスライダーができました。
縦方向のスライダーではswiperの一番親要素にheightを指定しないとうまく動かないので注意が必要です。ここではスライダーがレスポンシブになるようにwithとheightをvw(Viewport Width)で指定しています。
②スライダーを縦方向にする
swiperスライダーを縦方向に動かすには、directionオプションにverticalを指定します。
const swiper = new Swiper('.sample-slider', {
loop: true,
direction: "vertical", //追加
autoplay: {
delay: 2000,
},
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})スライダーが縦方向に動くようになりました。
ドットは自動で右側にもっていってくれますが、矢印はそのままです。
③縦方向のスライダーの矢印をカスタマイズする
縦方向のスライダーで矢印が左右についているのは少し変なので、カスタマイズしましょう。
ここでは矢印を上下に置いて右側にもっていきます。
.sample-slider [class^=swiper-button]{
transform:rotate(90deg);
top: initial;
left: initial;
right: 10px;
margin: 0;
}
.sample-slider .swiper-button-prev{
top:0;
}
.sample-slider .swiper-button-next{
bottom:0;
}縦方向スライダーらしい矢印になりました。
④ドットの位置を調整する
下記のようにCSSを追記して、ドットの縦位置を矢印に合わせます。
.sample-slider .swiper-pagination{
right:20px;
}いい感じになりました！
ソースコード全文
最後にソースコードを全文載せておきます。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<style>
.sample-slider{
width: 60vw;
height: 33vw;
}
.sample-slider img{
width: 100%;
}
.sample-slider [class^=swiper-button]{
transform:rotate(90deg);
top: initial;
left: initial;
right: 10px;
margin: 0;
}
.sample-slider .swiper-button-prev{
top:0;
}
.sample-slider .swiper-button-next{
bottom:0;
}
.sample-slider .swiper-pagination{
right:20px;
}
</style>
<div class="swiper sample-slider">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/sample1.png"></div>
<div class="swiper-slide"><img src="./img/sample2.png"></div>
<div class="swiper-slide"><img src="./img/sample3.png"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
const swiper = new Swiper('.sample-slider', {
loop: true, //ループ
direction: "vertical", //スライドの向きを縦方向に
autoplay: { //自動再生
delay: 2000,
},
pagination: { //ページネーション（ドット）
el: '.swiper-pagination',
},
navigation: { //ナビゲーション（矢印）
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
</script>以上、swiper.jsを使用して、縦方向に動くスライダーを作成して見た目を整える方法でした。
下記ではSwiperスライダーの様々なカスタマイズ方法を記しているのでぜひ覗いてみてください!
Swiperスライダーのデモ22選
