[plugin] slick.js 자동재생 멈춤 메서드

slick.js 플러그인을 입힌 자동재생 슬라이더에서 특정 슬라이드에 머물게 하는 메서드가 있다.

slickPause

 

또한 hover, focus시에 멈추게 하는 값이 있다.

pauseOnHover: true,
pauseOnFocus: true

 

하나의 슬라이더에 slick.js 를 입힌 후에 1. hover시 멈추게, 2. focus시 멈추게, 3. 특정 엘리멘트를 클릭 시 멈추게하는 예시는 아래와 같다.

$('.single-slick').slick({
  autoplay: true,
  autoplaySpeed: 5000,
  dots: true,
  pauseOnFocus: true,
  pauseOnHover: true,
  responsive: [
  {
  breakpoint: 1081,
  settings: {
  arrows: false,
  }
  }
  ]
});

$('.single-slick .video-area').on('click', function(){
	$('.single-slick').slick('slickPause');
});