備忘録です。
①headrの</head>直前に追加する
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
②footerの</body>直前に追加する
<script>
const swiper = new Swiper(".swiper", {
pagination: {
el: ".swiper-pagination",
},
// 前後スライドボタンを表示
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
loop: true, // ループの有効化
slidesPerView: 3.0,
slidesPerGroup: 1,
initialSlide: 1,
spaceBetween: 15,
centeredSlides : true,
});
</script>
③style.cssでデザイン調整をする
.swiper-slide img {
width: 100%;
height: auto;
}
.swiper-slide {
width: initial;
}