[Swiper] 탭메뉴 클릭시 해당 index로 슬라이드 이동 v1
Date.
220629
swiper 옵션인 thumbs gallery 를 사용해 아쉬운점 보완했습니다 (보러가기)
GitHub : https://url.kr/vro123
CodePen : https://codepen.io/ksoyy/pen/oNqNyLo
swiper를 활용해서 만든 탭메뉴 클릭시 슬라이드 index로 이동되는 슬라이드입니다.
CSS
슬라이드 되는 item이 많아지면 탭메뉴에 들어갈 버튼도 늘어나기 때문에 탭메뉴 감싸는 부분에 overflow-x: auto; white-space: nowrap; 추가 했습니다.
JS
단순 슬라이드기능과, 썸네일 클릭시 해당 슬라이드로 이동되는 기능만 존재하는 슬라이드입니다.
swiper에서 slideChange 를 활용해 슬라이드의 index를 구했고, 탭메뉴에도 알맞는 index에 활성화 클래스 추가/삭제 넣었습니다.
탭메뉴 버튼 클릭시 slideTo 를 활용해 버튼의 index와 슬라이드의 index가 일치하게 추가했습니다.
아쉬운점
1. 슬라이드가 5개 이상일시 6번째 탭메뉴 버튼을 볼려면 수동으로 스크롤 해야함
2. 슬라이드가 오른쪽에서 왼쪽으로 슬라이드 될때 탭메뉴가 상단에 떠있어서 부자연스러운 느낌이 있음
