테스트 사이트 - 개발 중인 베타 버전입니다

스와이프 시 탭도 함께 바뀌는 방법 채택완료

히어로is히어 2년 전 조회 2,760

https://mlbpark.donga.com/mp

mlb파크 모바일 사이트처럼 스와이프시 탭도 함께 바뀌는 코드를 만들어보려고 했는데

초보다 보니 역시 실패했네요ㅠㅠㅠ

 

 

swiperjs에서 데모들을 보았는데

탭도 함께 움직이는 코드는 따로 없더라구요.

스와이프 할때마다 탭도 같이 바뀌는 소스코드 구할 수 있는 곳이 없을까요?

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
세크티
2년 전

swiper 데모중에 thumbs-gallery를 쓰시면 됩니다. 상하 위치바꾸고 썸네일 칸에 텍스트로 바꾸시면 되겠네요.

https://swiperjs.com/demos#thumbs-gallery

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

F
2년 전

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 처리해서 상단으로 보내고 탭형태로 구성하시면 됩니다. 

 

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인