Swiper API 클릭 이벤트 오류 해결

슬라이드 배너를 만들 때 보통 swiper API를 많이 사용하는데 프로젝트를 진행하던 중 오류를 발견했다.
배너의 각 슬라이드를 클릭하면 url 이동을 해야 하는데 autoplay loop로 스와이퍼가 돌 경우 첫번 째 슬라이드로 이동하면 
딱 그 첫번 째 슬라이드만 url 이동이 되지 않는다.  HTML에 클릭 이벤트를 주어 이동하도록 하였다.
서치를 해보니까 스와이퍼 깃허브 오류에 해당 오류가 많이 공유되고 있음을 확인했다. 하지만 명확한 해결 방안이 없었다.

내가 해결한 방법은 스와이퍼 내부의 click이벤트를 사용하는 것이다.

  swiperOptions = {
          slidesPerView: 1,
          spaceBetween: 16,
          autoplay: { delay: 3000, disableOnInteraction: false },
          loop: true,
          loopAdditionalSlides: 1,
          pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
          },
          on: {
            click: async (event) => {
              const url = event.clickedSlide.getAttribute('id');
              Browser.open({ url: url });
            },
          },
        };

 

 

스와이퍼 API 문서를 정독하다보면 다양한 옵션들을 볼 수 있으니 참고하며 수월한 코딩시간이 되길..

https://swiperjs.com/swiper-api

Swiper - The Most Modern Mobile Touch Slider