今回はSwiperのカスタマイズ方法として、以下のようなスライダーを作成する方法を紹介します。
- スライドを1度に3枚表示する
- 中央のスライドは大きく、左右のスライドは少し小さくする
- 左右のスライドは画面外にはみ出させる
実装DEMOとコピペ用のコード一式も用意していますので、是非参考にしてみてください。
左右にはみ出すスライダーの実装DEMO
こちらが今回作成するスライダーの実装DEMOです。
実際の挙動を確認してみてください。
今回の制作物が確認できたので、次はコピペ用の実装コードの紹介をしていきます。
【コピペ用】左右にはみ出すスライダーの実装コード一式
コピペするとすぐにお使いいただける全体コード一式です。
HTML・CSS・JavaScriptファイルをそれぞれ作成してお使いください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Swiper 実装DEMO</title>
<!-- CDN読み込み -->
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
<!-- CSSファイル読み込み -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="slide-1.png" alt="スライド1" />
</div>
<div class="swiper-slide">
<img src="slide-2.png" alt="スライド2" />
</div>
<div class="swiper-slide">
<img src="slide-3.png" alt="スライド3" />
</div>
<div class="swiper-slide">
<img src="slide-4.png" alt="スライド4" />
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<!-- CDN読み込み -->
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<!-- JSファイル読み込み -->
<script src="main.js"></script>
</body>
</html>画像は用意していませんので、各自で用意してパスを記入してください。
/* 画像 */
img {
width: 100%;
height: auto;
}
/* スライド全体 */
.swiper-slide {
transition: transform 0.6s;
}
/* 左右のスライド */
.swiper-slide-prev,
.swiper-slide-next,
.swiper-slide-duplicate-prev,
.swiper-slide-duplicate-next {
transform: scale(0.85);
}const swiper = new Swiper(".swiper", {
speed: 600,
loop: true,
slidesPerView: 1.8,
centeredSlides: true,
spaceBetween: 20,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});以上で実装コードの紹介は終わりです。
次の章でそれぞれの詳しい解説をしていきますので、カスタマイズしたい・コードを理解したいという方は読み進めてください。
【解説】左右にはみ出すスライダーの実装コード解説
ここからは実装コードの解説をしていきます。
- Swiperを読み込む
- HTML
- CSS
- JavaScript
上記の順番で進めていきますね。
①Swiperを読み込む
Swiperを使用するには、ライブラリを読み込む必要がありますね。
今回は、一番手軽に読み込むことができるCDNを使用します。
CSSはheadタグ内に、JavaScriptはbody閉じタグの直前で以下のようにして読み込んでください。
<head>
<!-- head内でCSSのCDNを読み込む -->
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- bodyの閉じタグ直前でJSのCDNを読み込む -->
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<script src="script.js"></script>
</body>②HTML
続いてはHTMLの解説をしていきます。
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="slide-1.png" alt="スライド1" />
</div>
<div class="swiper-slide">
<img src="slide-2.png" alt="スライド2" />
</div>
<div class="swiper-slide">
<img src="slide-3.png" alt="スライド3" />
</div>
<div class="swiper-slide">
<img src="slide-4.png" alt="スライド4" />
</div>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>Swiperの公式ページで紹介されているHTMLレイアウトをほぼそのまま使用しています。
imgタグのsrcは仮なので、各自画像を用意してパスを繋いでください。
③CSS
続いてはCSSの解説です。
ここで左右のスライドの大きさを調整します。
/* 画像 */
img {
width: 100%;
height: auto;
}
/* スライド全体 */
.swiper-slide {
transition: transform 0.6s;
}
/* 左右のスライド */
.swiper-slide-prev,
.swiper-slide-next,
.swiper-slide-duplicate-prev,
.swiper-slide-duplicate-next {
transform: scale(0.85);
}左右の画像を縮小するには、transformのscaleを使用します。
transform: scale(0.85); /* オリジナルサイズの0.85倍の大きさにする */scaleは数値を1以上にすると拡大し、1以下にすると縮小させることができるCSS関数です。
この関数を利用して左右に配置されるスライドを縮小することで、中央のスライドが大きく見えるという仕組みですね。
Swiperでは、前のスライドにswiper-slide-prev、次のスライドにswiper-slide-nextというCSSクラスが自動的に付与されます。
それらのクラスに対して、scaleをかけることでスライド自体のサイズを縮小します。
/* 左右のスライド */
.swiper-slide-prev,
.swiper-slide-next,
.swiper-slide-duplicate-prev,
.swiper-slide-duplicate-next {
transform: scale(0.85);
}さらに今回はループをONにしているので、最初のスライド・最後のスライドの前後に複製されるスライドに対してもscaleをかけておきます。
これで左右のスライドを縮小して表示することができました。
CSSの解説は以上です。
④JavaScript
最後はJavaScriptの解説をしていきます。
const swiper = new Swiper(".swiper", {
speed: 600, // スライドの切り替えスピード
loop: true, // ループさせる
slidesPerView: 1.8, // スライドを複数枚表示する
centeredSlides: true, // スライドを中央寄せにする
spaceBetween: 20, // スライド間の余白
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});今回のスライダーには、上記のSwiperオプションを設定しています。
この中でも重要なのが、slidesPerViewです。
このオプションでは、1度に何枚のスライドを表示するかを指定することができます。
デフォルト値は1なので、何も指定しない場合は1画面にひとつのスライドが表示されますね。
これを1.8のように小数にすることで、複数スライドを表示かつスライドをはみ出させることができます。
次に重要なのが、centeredSlidesです。
これをtrueにすることで、スライドが中央寄せで表示されるようになります。
あとはspaceBetweenでスライド間の余白を調整、speedでスライドの切り替え速度を調整して完成です！
以上でJavaScriptの解説は終わりです。
【まとめ】スライドを左右にはみ出させる＆中央のスライドを大きくする方法
Swiperで左右のスライドを小さく＆中央のスライドを大きくする方法を紹介しました。
- スライドを1度に3枚表示する
- 中央のスライドは大きく、左右のスライドは少し小さくする
- 左右のスライドは画面外にはみ出させる
こういったスライダーを作成したい場合は、是非この記事を参考にしてみてください。
コメント