slick slider 자동재생시간을 유지한 채로 일시정지하는 방법이 있나요?
본문
안녕하세요.
$('#slider-li').slick('slickPause');
$('#slider-li').slick('slickPlay');
위와같이 작성할 경우 자동재생 시간이 초기화 되더라구요.
예를들어 자동재생시간이 6초면
4초에 일시정지를 할 경우 2초후에 슬라이드가 넘어가게 하고 싶습니다.
방법이 있을까요?
*추가로 슬라이더에 드래그를 하고 슬라이더를 넘기지 않았을 때에도 동일한 현상이 일어나는데 혹시 아신다면 이것도 답변해주시면 감사하겠습니다 ㅠ*
답변 1
슬라이더 등 배너와 갤러리 코드는 크게 두가지로 나뉩니다.
첫번째가 요즘의 대세인 애니메이션 css 로 만드는 경우이고
두번째가 감속탄성을 이용한 고전적인 코드인데
질문자님께서 생각하는 기능은 1번보다는 2번이 더 조절하기가 쉽습니다.
저 같은 경우는 오픈코드를 사용하지 않고 스스로 두번째 형태로 만들어 사용하는데
이럴 경우
1_1 . 정지버튼 클릭시 감속탄성을 일으키는 슬라이드 셋인터벌을 클리어 인터벌시킨디.
1_2. 동시에 다른 셋인터벌로 카운터변수를 하나 만들어서 초기값을 0으로 주고 1씩 증가시킨다.
2_1. 카운터 셋인터벌이 100(이건 임의의 수)이 되면 카운터 셋인더벌을 클리어 인터벌 시킨다.
2_2. 동시에 슬라이드 셋인터벌을 진행시킨다.
위와 같은 형태로 짤 것입니다만 질문게시판에서 대답글로 드리기에는 시간이 꽤 걸리는 일이라 코드를 드리지 못해 죄송하구요.
특정 슬라이드 소스에 이를 구현하려면 마찬가지의 수법으로 그 코드에 맞는 함수를 구성하셔야 할 것입니다.
감사합니다 시간이 오래걸릴 것 같지만 도전해볼수 있을 것 같습니다ㅎㅎ