swiper js 자동플레이가 잘 안될때

 

swiper js 사용하여 슬라이드를 자동플레이 하는데 슬라이드가 끝까지 가고 나서 처음으로 되돌아 와야 하는데 안되고 멈춰있는 경우가 있다. 기본적으로 swiper 설정시 loop: true 로 세팅하면 레이어 끝까지 가면 자동으로  처음으로 가서 플레이돼야 하는데  안 되는 경우가 있다.

 

이런 경우 인덱스가 바뀌는 이벤트에서 슬라이드가 끝까지 왔는지 체크 후 끝이면? 초 후에 슬라이드를 0번으로 변경한다.

 

 

swiper js 카테고리별로 보여주는 방법은 아래와 같습니다.

 

swiper js 카테고리별로 보여주기

 

 

 

아래와 같이 설정하면 slide 끝쪽까지 가면 3.5초 후 0번째 slide로 자동 이동 하는 소스이다.

const m_s6_slider3 = new Swiper(".main_s6_slider.s6_3", {

    spaceBetween: 16,
    slidesPerView: 1.8,
    loop: true,
    speed: 500,

    autoplay: {
        delay: 3500,
        disableOnInteraction: false,
    },

    navigation: {
        nextEl: "#s6_cont3 .swiper-button-next",
        prevEl: "#s6_cont3 .swiper-button-prev",
    },

    breakpoints: {        
        600: {
            spaceBetween: 0,
            slidesPerView: 4,
        },
    },
	
	on: {
		activeIndexChange: function () {
			if(this.isEnd) {				//끝까지 왔을경우
				//this.autoplay.stop();		//자동플레이 종료
				
				timer1 = setTimeout(()=> {
					this.slideTo(0);		//첫번째 슬라이드로 이동	
					//this.autoplay.start();	//자동플레이 시작
				},3500);
			}
		}
	},

});