headに書くこと
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
JavaScriptに書くこと
window.addEventListener('load', () => {
const elem = document.querySelector('.p-swiper-container');
if (elem === null) return;
const swiperParams = {
loop: true, // ループさせる
effect: 'fade', // フェードのエフェクト
autoplay: {
delay: 4000, // 4秒後に次の画像へ
disableOnInteraction: false, // ユーザー操作後に自動再生を再開する
},
speed: 2000, // 2秒かけながら次の画像へ移動
allowTouchMove: false, // マウスでのスワイプを禁止
navigation: {
// 左右のページ送りを有効にする
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
// 円形のページネーションを有効にする
el: '.swiper-pagination',
clickable: true, // クリックを有効にする
},
};
const swiper = new Swiper('.p-swiper-container', swiperParams);
});
CSSに書くこと
.p-swiper-container{
position: relative;
}
.swiper-slide {
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
height: 60vh;
overflow: hidden;
}
.p-swiper__desc {
position: absolute;
width: 100%;
text-align: center;
color: white;
top: 45%;
transform: translateY(-50%);
}
.p-swiper__heading {
font-size: 40px;
padding-bottom: 10px;
}
.p-swiper__text {
font-size: 21px;
}
HTMLに書くこと
<div class="p-swiper-container" style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-image: url('./images/fadeslide01.jpg');">
<div class="p-swiper__desc">
<h3 class="p-swiper__heading">徘徊するゴリラ</h3>
<div class="p-swiper__text">
<p>ジャングルを歩きまわることから1日が始まる</p>
</div>
</div>
</div>
<div class="swiper-slide" style="background-image: url('./images/fadeslide02.jpg');">
<div class="p-swiper__desc">
<h3 class="p-swiper__heading">威嚇するゴリラ</h3>
<div class="p-swiper__text">
<p>メスを守るためにオスは強くならなくてはならない</p>
</div>
</div>
</div>
<div class="swiper-slide" style="background-image: url('./images/fadeslide03.jpg');">
<div class="p-swiper__desc">
<h3 class="p-swiper__heading">驚くゴリラ</h3>
<div class="p-swiper__text">
<p>ゴリラだってびっくりしてもいいじゃない</p>
</div>
</div>
</div>
</div>
<!-- pagination -->
<div class="swiper-pagination"></div>
<!-- navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>