아주 간단한 슬라이더를 사용하고 있습니다. 사용자가 클릭 할 때 루프를 멈추는 방법

Question

나는 squareslider라는 슬라이더를 사용하고 있습니다.

은 (는 클래스 .prev하고 다음 내용과 사업부에 바로 클릭에 밀어 것) 슬라이더가 수동이었다 볼 수있는 코드가

(function($){ 

    $('.square-slider').each(function(){ 
     var slider = $(this), 
      slides = slider.find('.slide'), 
      currentSlide = 0; 

     slides.show(); 
     $(slides[currentSlide]).addClass('active'); 
     $('.next,.prev', slider).show(); 

     $('.prev', slider).on('click', function(){ 
      slides.removeClass('active'); 
      currentSlide--; 
      if(currentSlide < 0) currentSlide = slides.length - 1; 
      $(slides[currentSlide]).addClass('active'); 
      return false; 
     }); 

     $('.next', slider).on('click', function(){ 
      slides.removeClass('active'); 
      currentSlide++; 
      if(currentSlide > slides.length - 1) currentSlide = 0; 
      $(slides[currentSlide]).addClass('active'); 
      return false; 
     }); 
    }); 


swapC() 

function swapC() { 
    $('.next').trigger("click"); 
    window.setTimeout(function() { swapC() }, 6000) 
} 

})(window.jQuery); 

를 부착 찾을 그래서 클릭을 시뮬레이션에서는 setTimeout을 사용하여 6 초마다 슬라이드를 뒤집을 수 있습니다.

사용자가 실제로 슬라이더의 화살표 중 하나를 클릭하면 슬라이더를 멈추고 싶습니다. 그러나 "트리거 된"클릭과 실제 발생 된 클릭을 구별 할 수 없기 때문에 조금 붙어 있습니다.

이 작업을 수행하는 방법에 대한 의견이 있으십니까? 루프의 클릭을 시뮬레이트하지 않고 슬라이더를 활성화하는 방법을 찾았습니까?

고마워요 많은 사람들

아이디어가 있으십니까?

Answer 1

지우기 clearTimeout() 기능 그것을 참조 UID를 유지하고 호출하여 제한 시간 :

(function ($) { 
    var timeout; 
    $('.square-slider').each(function() { 
     var slider = $(this), 
      slides = slider.find('.slide'), 
      currentSlide = 0; 

     slides.show(); 
     $(slides[currentSlide]).addClass('active'); 
     $('.next,.prev', slider).show(); 

     $('.prev', slider).on('click', function() { 
      slides.removeClass('active'); 
      currentSlide--; 
      if (currentSlide < 0) currentSlide = slides.length - 1; 
      $(slides[currentSlide]).addClass('active'); 
      return false; 
     }); 

     $('.next', slider).on('click', function() { 
      slides.removeClass('active'); 
      currentSlide++; 
      if (currentSlide > slides.length - 1) currentSlide = 0; 
      $(slides[currentSlide]).addClass('active'); 
      return false; 
     }); 

     $('.stop', slider).on('click', function() { 
      clearTimeout(timeout); 
      return false; 
     }); 
    }); 


    swapC() 

    function swapC() { 
     $('.next').trigger("click"); 
     timeout = window.setTimeout(swapC, 6000) 
    } 

})(window.jQuery);