・Swiperで上下複数行あるスライダーを作る方法ある？
こんな疑問にお答えします。
デザインによっては、下記みたいに上下複数行あるスライダーを実装することありますよね。
実はこれ、swiperでも実装可能です。
すぐにできるよ！
ということで、この記事では「Swiperで上下複数行のスライダー作成方法」について解説していきます！
swiper自体の作り方については下記記事を参考に↓
【簡単】Swiperの使い方｜初心者向けに解説【オプション】 Swiperで上下複数行のスライダー作成方法
目次
【解説】Swiperで上下複数行のスライダー作成方法【サンプルあり】
そんな上下複数行のスライダーサンプルがこちら↓
See the Pen swiper 複数行のグリッドスライダー by jito-coder (@jito-coder) on CodePen.
縦に2、横に2のスライダーになっていますよね。
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide01">
<img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
</div>
<div class="swiper-slide swiper-slide02">
<img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
</div>
<!-- 省略 -->
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>.swiper {
height: 500px;
width: 70%;
}
@media screen and (max-width: 1000px) {
.swiper {
height: 45vw;
}
}
.swiper-slide {
height: auto;
}window.onload = function() {
const swiper = new Swiper(".swiper", {
slidesPerView: 2,
spaceBetween: 10,
grid: {
rows: 2,
},
pagination: {
el: ".swiper-pagination",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
}コードの中で重要な点がこちら↓
- 通常通りswiper用のHTMLを組む
- スライドの親要素の高さを指定
- 反映スライド数と行数を指定
- 余白を指定
- スライド要素の高さをautoに
順に解説してきます。
まず通常通りswiper実行用のHTMLを組んでいきます。
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide01">
<img src="https://jito-site.com/wp-content/uploads/2023/01/1.png" alt="">
</div>
<div class="swiper-slide swiper-slide02">
<img src="https://jito-site.com/wp-content/uploads/2023/01/2.png" alt="">
</div>
<!-- 省略 -->
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>HTMLについては通常通りですね。
次にスライドの親要素の高さを指定しましょう。
この高さに対して、複数行のスライド要素が入ることになります。
.swiper {
height: 500px;
width: 70%;
}
@media screen and (max-width: 1000px) {
.swiper {
height: 45vw;
}
}レスポンシブ対応する場合は「vw」で指定するのがおすすめ。
続いて複数行にするために、JavaScriptにてオプションを記述します。
- 「slidesPerView」⇒横列数
- 「gridのrows」⇒縦列数
window.onload = function() {
const swiper = new Swiper(".swiper", {
// 反映スライド数
slidesPerView: 2,
// 行数
grid: {
rows: 2,
},
pagination: {
el: ".swiper-pagination",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
}これで一度に横に2枚、縦に2列反映するスライダーが作成できました。
ただしこのままでは余白がないですね。。
そしたらデザインにもよりますが、余白を作っていきましょう。
window.onload = function() {
const swiper = new Swiper(".swiper", {
// 余白
spaceBetween: 10,
// 反映スライド数
slidesPerView: 2,
// 行数
grid: {
rows: 2,
},
pagination: {
el: ".swiper-pagination",
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
}「spaceBetween」にてスライド同士の間隔を記述します。今回は10pxに指定しました。
ただしこのままでは、縦と横それぞれに余白ができてしまい段落落ちしてしまいます。。
下記のように崩れてしまう。
そこで最後にこのズレ対策をしていきます。
最後にすることは、スライド要素の高さを「auto」にすることです。
.swiper-slide {
height: auto;
}これで余白もできつつ、上下複数行のスライダーが実装できました！
行数を増やしたい場合は、オプションの数値を変えればOKです。
【解説】Swiperで上下複数行のスライダー作成方法【注意点】
Swiperにて上下複数行のスライダーを作る場合、注意点がいくつかあります。
それががこちら↓
- スライド数
- 「loop」オプション
順に解説してきます。
行数や列数によってスライド数が足りない場合があります。
すると下記のように空の要素がでちゃいます↓
空の要素を作りたくない場合は、要素の数に注意しましょう。
複数行のスライダーを作る場合、「loop」オプションを「true」にするのはやめておきましょう。
というのも動きがおかしなってしまうため。。
【解説】Swiperで上下複数行のスライダー作成方法【サンプルあり】：まとめ
- 通常通りswiper用のHTMLを組む
- スライドの親要素の高さを指定
- 反映スライド数と行数を指定
- 余白を指定
- スライド要素の高さをautoに
Swiperで上下複数行のスライダー作成する時はためしてみてね！
