[ Swiper ] 슬라이드가 한개일때 페이지네이션과 버튼 안보이게 하기

watchOverflow: true와 loop:true를 함께 사용하기

요구사항

1. 슬라이드가 한 개일때 페이지네이션과 버튼 보이지 않도록 구현 → watchOverflow: true
2. 슬라이드가 여러개 있을 때 마지막 슬라이드에서 스와이프 시 첫 슬라이드로 이동 → loop:true

Swiper Options

• watchOverflow: true : 슬라이드가 1개일때 pager와 button 숨김
• loop:true : 슬라이드 반복 여부.

위 요구사항을 구현하기 위해 watchOverflow: true와 loop:true를 같이 사용하려고 했는데 watchOverflow: true와 loop:true는 같이 사용할 수 없었다.

두 옵션을 같이 사용할 경우에는 watchOverFlow가 동작을 멈추는 문제가 생겼다.

🔗 https://github.com/nolimits4web/swiper/issues/2621

watchOverflow and loop · Issue #2621 · nolimits4web/swiper

---

해결

https://www.great-tit.com/swiper-prevent-single-slide-swipe-with-loop-enabled/

Swiper: Prevent single slide swipe with loop enabled - Great-Tit - Web / Code / Design Magazine

위 블로그에 따르면 슬라이드에 둘 이상의 슬라이드가 있는 경우에만 Swiper의 loop를 활성화하면 watchOverflow: true와 loop:true를 같이 쓸 수 있다고 되어있다.

그래서 슬라이드의 개수가 1 이상일때만 loop를 사용할 수 있도록 옵션을 지정했다.

        loop: this.SwioperLength > 1, // 슬라이드가 한개 이상일때만 loop: true
        watchOverflow: true,

또한 afterInit기능을 사용해 슬라이드가 한개일 경우에 제어를 할 수도 있다.

• afterInit : Swiper가 정상적으로 로드 되었는지 확인해서 특정 액션을 취할 때 사용