Swiper 사용 시 슬라이드가 부모 너비를 넘는 문제

Swiper 너비가 부모의 너비를 넘어 화면이 늘어나는 현상을 발견했다.

---

문제 상황

<swiper :slides-per-view="4" :space-between="16" class="swiper" @swiper="onSwiper">
    <swiper-slide
        v-for="content in contents"
        :key="content.idx"
    >
        <ImageCard/>
    </swiper-slide>
</swiper>

4개의 이미지를 16px 간격으로 보여주는 레이아웃을 구성하려고 했다.
하지만 ImageCard 컴포넌트 내부에서 flex: 1 0 0 스타일이 적용되어 있었고,
이로 인해 슬라이드 하나의 너비가 Swiper에서 계산한 너비를 초과하는 문제가 발생했다.

 

ImageCard는 여러 화면에서 재사용되는 컴포넌트이기 때문에,
컴포넌트를 직접 수정하기보다는 Swiper 쪽에서 슬라이드의 너비를 조정하는 방식으로 해결하기로 했다.

 

해결 방법

<swiper :slides-per-view="'auto'" :space-between="16" class="swiper" @swiper="onSwiper">
    <swiper-slide
        v-for="content in contents"
        :key="content.idx"
    >
        <ImageCard/>
    </swiper-slide>
</swiper>

.swiper-slide {
  max-width: calc((100% - 48px) / 4); // (100% - 간격) / 화면에 보일 수)
  box-sizing: border-box;
}

slide-per-view="auto"로 설정을 변경한 뒤,
슬라이드의 너비는 CSS에서 직접 계산하여 지정해주었고,
box-sizing: border-box 속성을 추가하여 padding과 margin의 영향을 받지 않도록 처리했다.