728x90 반응형 swiper3 [swiper-slide] 스와이프가 안될때 ++ 추가 destroy를 쓰지 않아도 두번째 탭 슬라이드에 observer: true, observeParents: true, 를 넣으면 해결된다. * 문제사항 : 탭메뉴가 2개가 있고 클릭할때마다 해당되는 컨텐츠를 보여줘야 할 때, 우선 전체 컨텐츠를 숨기고 eq(0).show()로 첫번째 컨텐츠만 보여준다. 그리고 클릭할때마다 해당 컨텐츠를 보여주게 설정하는데 이때 그 컨텐츠가 슬라이드가 되어야할때 문제가 생겼다. 처음 컨텐츠 슬라이드는 잘 먹히는데 두번째 탭메뉴를 클릭해서 컨텐츠를 슬라이드하려하니 작동되지 않았다. html구조와 해결방법은 이렇다. html Tab01 Tab02 Content01 Content02 Content01 Content02 script // slide01 var slide.. 2021. 9. 7. [swiper-slide] active 바뀔때 이벤트 주기 나는 주로 슬라이드 플러그인을 swiper로 많이 쓰는데 active가 바뀔때마다 이벤트를 주었을때 사용한 방법이다. 방법은 두가지가 있는데 activeIndexChange는 활성화된 인덱스가 바뀔 때마다 호출되고, slideChange는 활성화된 슬라이드(swiper-slide-active)가 바뀔 때마다 호출된다. 작업할 때 activeIndexChange는 반응하지 않아 slideChange를 사용하였다. var mySwiper = new Swiper('.swiper-container', { slidesPerView: 'auto', centeredSlides: true, on: { slideChange : function() { //이벤트 또는 조건문으로 이용하면 된다. }, }, }); ** 추가.. 2021. 9. 7. [swiper-slide] mouseup()을 이용하여 커스텀 하기 swiper slide를 사용 하던 중 Thumbs gallery (https://swiperjs.com/demos#thumbs-gallery)를 이용하여 탭메뉴와 컨텐츠를 연결하였다. 그러던 중 탭메뉴에 active바를 만들어 놓았는데, 클릭할때 active가 붙는건 click 이벤트로 만들었지만 스와이프할때는 어떻게 할지 난감하다가 발견한것이 moueup이다. .mouseup() : 마우스 버튼을 눌렀다 떼었을 때 발생한다. active바가 움직일때 자연스럽게 하기 위한 코드는 아래에서 참고하면 된다. See the Pen by HWANGAYOUNG (@ay9318) on CodePen. mouseup을 이용하여 swiper slide 컨텐츠를 스와이프했을때 탭메뉴에 activeBar() 함수를 주었.. 2021. 9. 6. 이전 1 다음 728x90 반응형
