react swiper autoplay 안될 때

 

import SwiperCore, { EffectCoverflow, Pagination, Autoplay } from "swiper";

function content() {
SwiperCore.use([Autoplay]);
    return (
    <div className="mainContainer">
        <div id="content">
            <Swiper effect={"coverflow"} grabCursor={false} centeredSlides={true} 
            		slidesPerView={"auto"} loop={true} autoplay={{ delay: 2000, disableOnInteraction: false }}
                    coverflowEffect={{
                      rotate: 50,
                      stretch: 0,
                      depth: 100,
                      modifier: 1,
                      slideShadows: true,
                    }}
                    pagination={true} modules={[Autoplay, EffectCoverflow, Pagination]}>
                  <SwiperSlide>
                    <img src="/images/09.jpg" />
                  </SwiperSlide>
                  <SwiperSlide>
                    <img src="/images/10.jpg" />
                  </SwiperSlide>
                  <SwiperSlide>
                    <img src="/images/11.jpg" />
                  </SwiperSlide>
                </Swiper>
            </div>
        </div>
    );
}

export default content;

Autoplay와 SwiperCore도 같이 import후, 

autoplay={{ delay: 2000, disableOnInteraction: false }} 자동재생 관련 옵션을 주면 된다.

 

delay : 시간설정

disableOnInteraction : 클릭하거나 이미지를 넘겼을 경우 자동재생 멈춤