스와이프 시 탭도 함께 바뀌는 방법
본문
mlb파크 모바일 사이트처럼 스와이프시 탭도 함께 바뀌는 코드를 만들어보려고 했는데
초보다 보니 역시 실패했네요ㅠㅠㅠ
swiperjs에서 데모들을 보았는데
탭도 함께 움직이는 코드는 따로 없더라구요.
스와이프 할때마다 탭도 같이 바뀌는 소스코드 구할 수 있는 곳이 없을까요?
답변 2
swiper 데모중에 thumbs-gallery를 쓰시면 됩니다. 상하 위치바꾸고 썸네일 칸에 텍스트로 바꾸시면 되겠네요.
https://swiperjs.com/demos#pagination-custom
페이징 커스텀을 통해서 구현하시면 됩니다.
예를 들어
<div class="swiper-slide" data-slide-title="슬라이드1"></div>
<div class="swiper-slide" data-slide-title="슬라이드2"></div>
이런식으로 슬라이드를 구성하시고 페이징 커스텀 옵션을
pagination: {
el: ".swiper-pagination",
clickable: true,
renderBullet: function (index, className) {
return '<span class="' + className + '">'+$(".swiper-wrapper>.swiper-slide").eq(index).data('slide-title')+"</span>";
},
},
처리하시면 페이징 부분에 slide-title 에 입력한 텍스트가 출력될겁니다.
페이징 부분을 css 처리해서 상단으로 보내고 탭형태로 구성하시면 됩니다.