[Swiper] 멈추지 않고 흐르는 슬라이드 만들기

 

멈추지 않고 흐르는 슬라이드 만들기

            <script>
                new Swiper(".mySwiper", {
                    autoplay: {
                        delay: 0,
                        disableOnInteraction: false,
                    },
                    slidesPerView: 1.3,
                    spaceBetween: 20,
                    loop: true,
                    speed: 5000,
                    loopAdditionalSlides: 3, // 추가 슬라이드 복제 → 마지막 슬라이드에서 멈칫하는 현상 방지
                    observer: true,
                    observeParents: true,
                    mousewheel: false,
                    simulateTouch: false,
                    pauseOnMouseEnter: false,
                    allowTouchMove: false,
                    grabCursor: false
                });
            </script>

 

💡 loopAdditionalSlides: 3 를 추가하면 마지막 슬라이드에서 버벅이거나 멈추는 현상이 방지된다.

 

멈추지 않고 흐르는 슬라이드 CSS

.swiper-wrapper {
    transition-timing-function: linear !important;
}

 

💡 해당 CSS를 반드시 넣어야 일정한 속도로 흐르게 된다.