[javascript & Swiper] 슬라이드 가운데 오기 & loop 아닐때

상황

클릭하면 해당 슬라이드로 이동하고, active된 슬라이드가 가운데 위치하게 해야해서 Swiper의 centeredSlides 속성을 사용하여 가운데 오게 했다.
loop일때는 이슈가 없었지만 loop가 아닐때 첫번째 슬라이드 옆에 공백이 생기는 상황이 발생하였다.

 

해결 centeredSlidesBounds

new Swiper(".js__main__slider", {
    loop: false,
    centeredSlides: true,
    centeredSlidesBounds: true //이걸 같이 추가해줘야함!!
})

centeredSlides와 함께 centeredSlidesBounds 속성을 추가해주었더니 해결이 되었다.

 

왼쪽에 공간을 채워줄 슬라이드가 없을때에는 가운데 정렬이 되지않는다. (0번째 슬라이드 클릭한 상태)

왼쪽에 공간이 채워줄 슬라이드가 있을때에는 가운데 정렬이 된다. (1번째 슬라이드를 클릭한 상태)