<div id="swiper-02" class="swiper swiper-02">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">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>
/* スワイパーで使うクラス */
.swiper-wrapper {
width: 100%;
height: 300px;
}
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 20px;
font-weight: 700;
}
.swiper-slide:nth-child(1) {
background-color: #fb4949;
}
.swiper-slide:nth-child(2) {
background-color: #34dc1a;
}
.swiper-slide:nth-child(3) {
background-color: #4FC3F7;
}
.swiper-slide:nth-child(4) {
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;
}
const Swiper_02 = new Swiper('#swiper-02', {
/* 追加コード */
direction: 'vertical',
/* 追加コード */
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
});
