[Swiper] 슬라이드 시작, 끝 간격 조절하기

피그마 시안)

1. 왼쪽 즉, 슬라이드 시작점에 여백이 있어야한다.

2. 슬라이드를 넘기면 좌우 여백없이 공간을 모두 차지해야한다.

 

진짜 무슨 생각으로 슬라이드를 이런 시안으로 만들었을까. 이왕 만들었으니 해결은 해야지.. 어떡해

---

💢 문제점

처음에는 의도대로 진행되는줄 알았다. 

슬라이드를 감싸는 태그에 margin-left 값을 줬다.

하지만 마지막 슬라이드는 오른쪽이 조금 잘려 전체 이미지를 볼 수 없는 문제가 생겼다

 

문제 영상)

마지막 슬라이드는 마우스로 땡겨야 간신히 볼 수 있다.

[ swiper 옵션 확인하기 ]

swiper가 이런 것도 해결 못 할리가 없다는 좌절감에 공식문서를 찾아보았다.

생각보다 간단하게 해결할 수 있었다.

오~ 있다

옵션	기능
slidesOffsetAfter : number	슬라이드 끝 부분 여백
slidesOffsetBefore : number	슬라이드 시작 부분 여백

옵션이 따로 있기 때문에 굳이 margin값을 새로 넣지않아도 해결할 수 있었다! 

 

 

🛫 해결 영상)

 

---

📍 참고
https://swiperjs.com/swiper-api#method-swiper-extendDefaults