Swiper

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

Swiper를 사용하던 중 버그가 하나 등장했다. 두둥 💨

Svelte 프로젝트에서 loop, autoplay, pagination을 사용 중이었다.

아래 첨부된 동영상을 보면 pagination bullet이 계속 2번째만 active되는 것을 볼 수가 있다.

몇 시간동안 찾아봤다 🥹 내 코드의 문제인가.. 라이브러리의 문제인가..

결국 해답을 찾았는데..

aria-label에 NaN 값이 들어있었던 것이다
(이미지를 렌더링할 때 각 슬라이드가 고유한 인덱스를 가지도록 data-swiper-slide-index 속성을 명시적으로 추가)

swiper-slide에 data-swiper-slide-index를 수동으로 업데이트해주면 문제 해결이다 🙏🏻

아래는 전체 코드입니다. 👩🏻‍💻

 

import { register } from 'swiper/element/bundle'

register()
const injectStyles = [
  `
    :host .swiper-pagination {
      top: 10px;
      right: 18px;
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      width: auto;
      left: initial;
    }
    :host .swiper-pagination-bullet {
      line-height: 6px;
    }
  `,
]

{#if banners.length > 0}
  <div class="banners">
    <swiper-container autoplay={true} loop={true} pagination={true} {injectStyles}>
      {#each banners as banner, i}
        <swiper-slide data-swiper-slide-index={i}>
          <button on:click={() => goBanner(banner)}>
            <img src={banner.imageUrl} alt={banner.title} />
          </button>
        </swiper-slide>
      {/each}
    </swiper-container>
  </div>
{/if}