<div id="swiper-09" class="swiper swiper-09">
<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>
<!-- アイコンは 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_09 = new Swiper('#swiper-09', {
/* 追加コード */
loop: true,
/* 追加コード */
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
}
});
