今回はswiperライブラリを使用したスライダー（カルーセル）のコードの記録になります。あの複数の画像や情報を横にスライドさせて見せるUIですね。swiperを使うとJQueryなしで簡単にスライダーを実装することができます。
しかし初めはこのライブラリを使用してもなぜかうまく画像をスライドできず、cdnの読み込みエラーが多発していました。しかし実際の原因はそうした読み込みエラー等ではなく、もっとシンプルなものでした。
こうしたスライドツールを使う上であらかじめ気を付けておきたい大切なポイントが1つあります。それができていないと何度やっても画像はスライドされず、画面にただ張り付いたままの状態になります。僕自身今回作業前にこの情報が欲しかったです。それは一体何かといいますと、
＜こうしたライブラリは必ず画面の表示枚数より多い数の画像を用意した上で使う＞
ということです。例えばページ内で横に3枚の画像を表示させてスライドさせるUIであれば、4枚以上は用意するということ。少なくとも僕のケースではそうしなければうまくいきませんでした。
まぁ考えてみれば当たり前と言えるかもしれません。表示枚数以上の画像が用意されていなければ、そもそもスライドさせる必要はありませんからね。
しかし、あらかじめ画像をループさせることが前提であれば、用意する画像なんて2～3枚程度のままコーディングを始めてしまう方は意外といらっしゃるのではないでしょうか。私のように。
今回の実装方法に関しては、まずhtmlにてスライドさせたい画像を4枚以上用意・配置します（横に3枚表示させる場合）。次に矢印はあらかじめswiperにて用意されていますので、divタグに専用のクラス名を付けるだけです。下記参照。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 安定版 Swiper CSS (jsDelivr) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- スライダーと矢印をまとめる親要素 -->
<div class="slider-container">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./images/1.png" alt=""></div>
<div class="swiper-slide"><img src="./images/2.png" alt=""></div>
<div class="swiper-slide"><img src="./images/3.png" alt=""></div>
<div class="swiper-slide"><img src="./images/4.png" alt=""></div>
<div class="swiper-slide"><img src="./images/5.png" alt=""></div>
<div class="swiper-slide"><img src="./images/6.png" alt=""></div>
</div>
</div>
<!-- 左右の矢印ボタンを追加 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<!-- 安定版 Swiper JS (jsDelivr) -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="./slider.js"></script>
</body>
</html>
次にslider.jsファイルです。ここはもう見栄えよくスライドさせるだけの最低限の設定だけ書かせていただいています。もっと詳しくSwiperのオプションが知りたいという方は、下記ブログ記事がとても分かりやすくまとめられていておすすめです。
＞＞【Swiper】カスタマイズ用オプションまとめ一覧｜じゅんぺいブログ
document.addEventListener("DOMContentLoaded", () => {
const swiper = new Swiper(".swiper", {
slidesPerView: 2.5, // 画面に見せる枚数
centeredSlides: true, // 中央揃えを有効化
loop: true, // ループ有効化
navigation: { // 矢印ボタンの設定
nextEl: ".swiper-button-prev",
prevEl: ".swiper-button-next",
},
});
});
では最後にcssファイルです。今回は3枚の画像を横にスライドさせ、中央に来た画像だけ大きく目立たせるようtransformプロパティで調整しています。
@charset "utf-8";
/* コンテナ全体（矢印を外側に置くため左右に余白を設ける） */
.slider-container {
position: relative;
width: 90%;
max-width: 1000px;
margin: 0 auto;
padding: 0 50px;
box-sizing: border-box;
}
/* スライダー全体の高さ調整（拡大分を見越して少し高くする） */
.swiper {
width: 100%;
height: 350px;
padding-top: 20px;
padding-bottom: 20px;
}
/* スライド（真ん中以外）の基本状態。画像は0.8倍に縮小しておく。*/
.swiper-slide {
transition: transform 0.4s ease;
border-radius: 8px;
transform: scale(0.8);
overflow: hidden;
}
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(0.8);
transition: transform 0.4s ease;
}
/* 真ん中に来たスライド（activeクラス）の状態。真ん中に来たら等倍（または1.1倍位）にする*/
.swiper-slide-active img {
transform: scale(1.1);
z-index: 1;
}
/* 矢印アイコン自体の大きさ（デフォルトは約27px） */
.swiper-button-prev,
.swiper-button-next {
--swiper-navigation-size: 35px;
color: #333;
top: 50%;
transform: translateY(-50%);
}
/* 左右の矢印を画像エリアの外側（余白部分）へ配置 */
.swiper-button-prev {
left: 10px;
}
.swiper-button-next {
right: 10px;
}
今回swiperの作業開始時は画像と矢印が重なっていたり、読み込んだ画像3枚がページ上部に張り付いたまま全くスライドしなかったりといったトラブル続きでしたが、なんとか最後は動く形を作ることができました。
今回のコードは上記3ファイルにプラスして画像を4枚以上用意・設定いただくだけでどなたでも手軽に下記イメージのような軽快なスライダーを作ることができます。ぜひ試してみてくださいね。
[参考イメージ]
それでは今回はこの辺で。
ご覧いただきありがとうございました！