<div id="swiper-15" class="swiper swiper-15">
<div class="swiper-wrapper">
<div class="swiper-slide slide-red">Slide 1</div>
<div class="swiper-slide slide-green">Slide 2</div>
<div class="swiper-slide slide-aqua">Slide 3</div>
<div class="swiper-slide slide-yellow">Slide 4</div>
<div class="swiper-slide slide-red">Slide 5</div>
<div class="swiper-slide slide-green">Slide 6</div>
<div class="swiper-slide slide-aqua">Slide 7</div>
<div class="swiper-slide slide-yellow">Slide 8</div>
<div class="swiper-slide slide-red">Slide 9</div>
<div class="swiper-slide slide-green">Slide 10</div>
<div class="swiper-slide slide-aqua">Slide 11</div>
<div class="swiper-slide slide-yellow">Slide 12</div>
</div>
<!-- アイコンは Font Awesome を使用しています。 -->
<div class="swiper-button-prev"><i class="fa-solid fa-chevron-left"></i></div>
<div class="swiper-button-next"><i class="fa-solid fa-chevron-right"></i></div>
<div class="swiper-pagination"></div>
</div>
/* スワイパーで使うクラス */
.swiper-wrapper {
width: 100%;
height: 300px;
}
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 20px;
font-weight: 700;
}
.slide-red {
background-color: #fb4949;
}
.slide-green {
background-color: #34dc1a;
}
.slide-aqua {
background-color: #4FC3F7;
}
.slide-yellow {
background-color: #FFC107;
}
.swiper .swiper-button-next,
.swiper .swiper-button-prev {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #fff;
}
.swiper .swiper-button-next::after,
.swiper .swiper-button-prev::after {
display: none;
}
.swiper .swiper-button-next i,
.swiper .swiper-button-prev i {
font-size: 20px;
color: #5CC0EF;
}
.swiper .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 8px;
width: 10px;
height: 10px;
background-color: rgba(0, 0, 0, .8);
}
.swiper .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active {
background-color: #fff;
}
const Swiper_15 = new Swiper('#swiper-15', {
slidesPerView: 1,
slidesPerGroup: 1,
breakpoints: {
500: {
slidesPerView: 2,
slidesPerGroup: 2,
},
768: {
slidesPerView: 3,
slidesPerGroup: 3,
},
1024: {
slidesPerView: 4,
slidesPerGroup: 4,
}
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
}
});