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 처리해서 상단으로 보내고 탭형태로 구성하시면 됩니다.
답변을 작성하려면 로그인이 필요합니다.