swiper 버튼 위치 조절 마음대로 하기

내가 생각하는 swiper 플러그인은 6버전이냐

그 상위버전이냐에 따라서 문제점과 활용도가 살짝 나뉜다.

그 중에 좌우버튼이 슬라이드 위에 있거나 아래에 위치할 때 등

버튼들이 mySwiper를 벗어날 때 잘리는 경우가 있었다.

 

6버전/최신버전 둘 다 방법은

mySwiper를 감싸는 div를 하나 추가해주고 그 div에 position : relative를 주면 된다.

 

현재 살펴보니 6버전에는 버튼위치의 상위에 기준점이 없어서 상관없지만

최신버전에는 .swiper, swiper-container에 기준점이 들어가있다.

그래서 .swiper, swiper-container에 따로 클래스를 추가해준 뒤 (ex. banner_slide)

position: static으로 기준점을 초기화시켜준다.

 

이미지없이 설명하느라 더 어려운것같다..

하지만 포인트는 버튼들이 absolute로 떠있는 상태이기 때문에

상위에 swiper 슬라이드를 감싸는 태그에 기준점을 추가해주면

마음대로 이동이 가능하다.

 

 

 

6버전 : https://swiper6.vercel.app/demos

최신버전 : https://swiperjs.com/demos#navigation