・左右が少し見切れるスライダーを作るには？
こんな疑問にお答えします。
スライダーを作るとき、下記みたいな左右が少しだけ見えてるレイアウトありますよね。
これ実はSwiperで簡単に実装可能です。
すぐにできるよ！
ということで、この記事では「Swiperで左右が少し見切れるスライダー」について解説していきます！
swiper自体の作り方については下記記事を参考に↓
【簡単】Swiperの使い方｜初心者向けに解説【オプション】 ・Swiperで左右が少し見切れるスライダー
・Swiperで左右が少し見切れる＋小さいスライダー
目次
【解説】Swiperで左右が少し見切れるスライダー作成【サンプルあり】
そんな左右が少し見切れるスライダーがこちら↓
See the Pen swiper 左右が少し見切れて見える by jito-coder (@jito-coder) on CodePen.
「３枚＋左右に見切れたスライド」が反映されていますよね。
<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>window.onload = function() {
const swiper = new Swiper(".swiper", {
spaceBetween: 20,
slidesPerView: 3.5,
centeredSlides: true,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
}コードの中で重要な点がこちら↓
- 通常通りのスライダーを実装
- 表示枚数を指定
- アクティブなスライドを中央に配置
- 余白をつける
順に解説してきます。
まず通常通りのスライダーを実装する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>ここに関してはいつも通りでOKです。
続いて表示枚数を指定します。
今回は「３枚＋右に0.25枚見切れる＋左に0.25枚見切れる」反映をしたいので、「slidesPerView: 3.5,」を指定しました。
window.onload = function() {
const swiper = new Swiper(".swiper", {
slidesPerView: 3.5,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
}すると下記のように反映されます。
この「slidesPerView」の数値によって、見切れる幅が変わるのでデザインに合わせて調整しましょう。
先ほどのままでは左に寄って表示されています。
アクティブなスライドを中央配置させたいので、「centeredSlides: true,」を記述しましょう。
window.onload = function() {
const swiper = new Swiper(".swiper", {
slidesPerView: 3.5,
centeredSlides: true,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
}これで下記のように見切れつつ、中央配置させることができました。
あとはデザインによりますが、余白をつけていきましょう。
「spaceBetween」を使えば、スライド同士の間隔を調整することができます。
window.onload = function() {
const swiper = new Swiper(".swiper", {
spaceBetween: 20,
slidesPerView: 3.5,
centeredSlides: true,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
}例として20pxの余白を指定。
下記画像のように見切れつつ、中央配置させつつ、余白をつけることができました。
これで左右が少し見切れるスライダー実装の完成です！
【解説】Swiperで左右が少し見切れる＋小さい＋透過するスライダー
最後に「左右が少し見切れる」＋「左右が少し小さい」＋「左右が透過」してるスライダーを紹介します。
そんなサンプルがこちら↓
See the Pen swiper 左右が少し見切れる＋透過＋小さい by jito-coder (@jito-coder) on CodePen.
真ん中のアクティブスライド以外は、小さく透過して反映していますよね。
コードは先ほどとほぼ変わらず、CSSのみ追加してるだけです。
// 全スライドに対して
.swiper-slide {
opacity: .5;
transform: scale(.85);
transition: .5s;
}
// アクティブなスライドに対して
.swiper-slide-active {
opacity: 1;
transform: scale(1);
z-index: 1;
}全スライドに対して透過率とサイズを小さく指定。
そしてアクティブなスライドにのみ、透過率とサイズを元に戻せば実装完成です。
これだけで左右が小さく透過してるスライダーができちゃいます。
「z-index: 1;」を指定して、
アクティブなスライドが上にくるようにしよう。
【解説】Swiperで左右が少し見切れるスライダー作成【サンプルあり】：まとめ
- 「slidesPerView」で見切れさせたい数値を記述
- 「centeredSlides: true,」で中央配置
- 「spaceBetween」を使いスライド同士の余白を指定
Swiperで左右が少し見切れるスライダーを作る時はためしてみてね！
