Carousel 3D (Swiper.js)
準備
HTML
Swiper.jsやダウンロードしたCSSファイル・Javascriptファイルの読み込みを行います。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="***/library.css">
<script src="***/library.js" type="module"></script>
HTML
基本のHTML構造
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
スライドの中身...
</div>
<div class="swiper-slide">
スライドの中身...
</div>
<div class="swiper-slide">
スライドの中身...
</div>
任意の数繰り返し...
</div>
</div>
CSS
CSSはカスタマイズ必須
以下は本サンプルのCSS
.swiper {
width: 900px; /*スライダー全体の横幅*/
margin: 0 auto;
}
.swiper-slide {
width: 300px; /*スライドの横幅*/
height: 400px; /*スライドの縦幅*/
}
.swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
Javascript
Javascriptは必要に応じてプロパティを設定
以下は本サンプルのJavascript
const swiper = new Swiper(".swiper", {
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
loop: true,
slidesPerView: "auto",
coverflowEffect: {
rotate: 0,
stretch: -50, // スライドの間隔
scale: 0.5, // 前後のスライドのスケール値
depth: 0,
modifier: 1,
},
navigation: {
nextEl: ".swiper-button-next", // nextボタンの要素セレクター
prevEl: ".swiper-button-prev", // prevボタンの要素セレクター
},
pagination: {
el: ".swiper-pagination", // ページネーションの要素セレクター
clickable: true, // クリックできるように設定
},
});
Button
HTML
任意の位置にPrev(戻る)・Next(進む)ボタンを作成します。
クラス名はJavascriptで設定可能なので自由に設定可能
要素の位置も以下と異なっても動作するようです。
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
スライドの中身...
</div>
<div class="swiper-slide">
スライドの中身...
</div>
<div class="swiper-slide">
スライドの中身...
</div>
任意の数繰り返し...
</div>
<div class="swiper-button-prev"></div> <!--追記部分-->
<div class="swiper-button-next"></div> <!--追記部分-->
</div>
CSS
Swiper.jsのCSSを読み込んでいる場合デフォルトのCSSが適応されているので必要に応じて上書して記述します
その他は基本的なCSS同様となります。
以下はサンプルのボタンに関するCSS
.swiper-button-next, .swiper-button-prev {
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
font-size: 48px;
}
Javascript
ボタンの機能を実装するためにはJavascriptでも要素の設定をする必要があります。
複数のスライダーを使用する場合にはそれぞれのボタンのクラス名を違うものにする必要があります。
以下は本サンプルでの設定
const swiper = new Swiper(".swiper", {
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
loop: true,
slidesPerView: "auto",
coverflowEffect: {
rotate: 0,
stretch: -50,
scale: 0.5,
depth: 0,
modifier: 1,
},
navigation: { // 追記部分
nextEl: ".swiper-button-next", // 追記部分
prevEl: ".swiper-button-prev", // 追記部分
}, // 追記部分
});
Pagination
HTML
ページネーションもボタンと同様にHTMLに要素を追加する必要があります。
基本的にはボタンと同じ流れになります。
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
スライドの中身...
</div>
<div class="swiper-slide">
スライドの中身...
</div>
<div class="swiper-slide">
スライドの中身...
</div>
任意の数繰り返し...
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>
</div>
CSS
ボタンと同様にデフォルトのCSSが適応されているので必要に応じて上書して記述します
その他は基本的なCSS同様となります。
以下はサンプルのページネーションに関するCSS
.swiper-pagination{
position: relative;
margin-top: 36px;
}