(Javascript / jQuery) Swiper 슬라이더 응용 - 페이지 변경시 좌우 이동버튼 텍스트 변경 (Swiper navigation text change) - loop일 경우

swiper.js

See the Pen Swiper Slide - 페이지 변경시 좌우 이동버튼 텍스트 변경 (Swiper navigation text change) -loop by kimyangsun (@kimyangsun) on CodePen.

 

저는 보통 슬라이더를 사용할 때 slick을 자주 사용하고 응용해왔었는데,

최근에 거의 5년동안 앞서던 slick이 swiper에게 다운로드 횟수가 역전당한걸 보고 swiper에 대해서도 좀 찾아봤습니다.

그 결과 저는 개인적으로 slick보다 사용할 수 있는 기본적인 기능들이 더 많은 느낌을 받았습니다.

뭐 드래그로 페이지를 이동한다던가 하는 기능들 말이죠. slick은 자체적으로 코드를 추가해서 드래그 기능을 구현하는데

swiper는 애초에 내장 기능으로 들어가져 있습니다.

 

근데 swiper를 보다보니까 좌우 이동버튼에 이전, 다음으로 오는 슬라이드의 타이틀을 넣고 싶은 경우에 어떻게 해야하는지 정보가 없어 찾아봤습니다.

slick에서는 arrow버튼에 해당 타이틀들을 넣는 방법이 구글링만 해봐도 바로바로 나오는데 swiper는 찾을수가 없었습니다 ㅠ.ㅠ

제가 못찾는거일수도 있는데..

아무튼 그래서 직접 시간을 조금 투자해 해당 기능을 구현해봤습니다.

슬라이드 마지막에서 처음으로 돌아갈때 index값들을 조정해주는 코드를 추가했고 잘 작동하는걸 확인하구 올립니다.

해당 코드는 loop가 true일 때에 맞게 적용시킨 코드입니다.

자세한 내용은 위 코드펜에 들어가서 코드를 확인하시면 됩니다. :)