swiper demo 중 Thumbs gallery 와 관련하여 질문드립니다.

Question

thumbs-gallery 를 보고 적용하였습니다.thumbs-gallery를 보면 상단은 큰 이미지, 하단은 이미지 리스트가 있는데, 이 이미지 리스트를 클릭하거나, prev, next 버튼을 클릭하면 이미지가 변경이 됩니다.저는 상단 prev, next 버튼을 클릭하면 이미지가 변경된 후, 일정시간동안 버튼이 비활성화되도록 하는 작업을 진행하였습니다.이제 하단 이미지 리스트에 해당 작업이 이루어져야하는데, 이미지가 변경된 후 일정시간동안 하단의 이미지를 클릭하여도 이미지가 변경되지않도록 하고싶습니다.방법을 알 수없어서 그런데 어떻게 해야할 지 알수있을까요? 아래는 제가 작성한 스크립트 입니다. 상단 swiper(큰 이미지)var swiper2 &#61; new Swiper(&#34;.mySwiper2&#34;, { spaceBetween: 10, navigation: { nextEl: &#34;.swiper-button-next&#34;, prevEl: &#34;.swiper-button-prev&#34;, }, touchRatio: 0, thumbs: { swiper: swiper, }, on:{ slideChangeTransitionStart: function() { $(&#34;.swiper-button-next&#34;).addClass(&#34;swiper-button-disabled&#34;); $(&#34;.swiper-button-prev&#34;).addClass(&#34;swiper-button-disabled&#34;); $(&#34;.clearLecture&#34;).css(&#34;background-color&#34;, &#34;white&#34;); setTimeout(function() { if($(&#34;.swiper-button-next&#34;).attr(&#34;tabindex&#34;) !&#61; -1) {$(&#34;.swiper-button-next&#34;).removeClass(&#34;swiper-button-disabled&#34;);} if($(&#34;.swiper-button-prev&#34;).attr(&#34;tabindex&#34;) !&#61; -1) {$(&#34;.swiper-button-prev&#34;).removeClass(&#34;swiper-button-disabled&#34;);} if($(&#34;.swiper-button-next&#34;).attr(&#34;tabindex&#34;) &#61;&#61; -1) {$(&#34;.clearLecture&#34;).css(&#34;background-color&#34;, &#34;black&#34;);} }, 3000) }, } });하단 swiper(이미지 리스트)var swiper &#61; new Swiper(&#34;.mySwiper&#34;, { slidesPerView: 2, touchRatio: 0, }); 이미지1: 화면이동전(오른쪽버튼 활성화상태) 이미지2: 이미지 변경 후(버튼 비활성화상태)

swiper demo 중 Thumbs gallery 와 관련하여 질문드립니다.

0개의 답변

#swiper.js 목록