swiper 구현

HTML

<div class="reviews-content swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="review-box">
                        <i class="bx bxs-quote-right"></i>
                        <p class="review-text">
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, quae. Quibusdam quam repellendus numquam repudiandae architecto quidem eius, nemo culpa dolorem veritatis aliquid explicabo cumque.
                        </p>
                        <div class="review-profile">
                            <h2>Audrey Bella</h2>
                            <span>From Finland</span>
                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cGVyc29ufGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="">
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="review-box">
                        <i class="bx bxs-quote-right"></i>
                        <p class="review-text">
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, quae. Quibusdam quam repellendus numquam repudiandae architecto quidem eius, nemo culpa dolorem veritatis aliquid explicabo cumque.
                        </p>
                        <div class="review-profile">
                            <h2>이인재</h2>
                            <span>From Seoul, Korea</span>
                            <img src="https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8cGVyc29ufGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="">
                        </div>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="review-box">
                        <i class="bx bxs-quote-right"></i>
                        <p class="review-text">
                            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione, quae. Quibusdam quam repellendus numquam repudiandae architecto quidem eius, nemo culpa dolorem veritatis aliquid explicabo cumque.
                        </p>
                        <div class="review-profile">
                            <h2>Alexa</h2>
                            <span>From USA</span>
                            <img src="https://images.unsplash.com/photo-1491349174775-aaafddd81942?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fHBlcnNvbnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>

위와 같이 class에 swiper, swiper-slide 등을 설정

그리고 script 부분에 <script src="./swiper-bundle.min.js"></script> 추가해줌

---

CSS

.swiper-pagination-bullet {
    width: 6px !important;
    height: 6px !important;
    border-radius: 0.2rem !important;
    background: var(--bg-color) !important;
    opacity: 1 !important;
}

.swiper-pagination-bullet-active {
    width: 1.5rem !important;
    background: var(--main-color) !important;
}

swiper에 대한 CSS는 !important 속성을 추가해주는 것이 좋음.
아니면 제대로 작동하지 않을 수 있다.

active로 현재 active된 영역의 swiper 점은 잘 알아볼 수 있도록 width가 좀 길게 설정

---

JavaScript

var swiper = new Swiper(".reviews-content", {
    spaceBetween: 30,
    centeredSlides: true,
    autoplay: {
        delay: 5000,
        disableOnInteraction: true,
    },
    pagination: {
        el: ".swiper-pagination",
        clickable: true,
    },
});

JS 코드에 추가
autoplay나 간격 등을 개인의 취향에 맞게 설정

---

참고 : https://swiperjs.com/