slick timestamp 예제

by Kim Ara

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js"></script>
  
  <div class="slick-wrap">
    <div data-filter="movie">
      A
    </div>
    <div data-filter="movie">
      B
    </div>
    <div data-filter="study">
      C
    </div>
    <div data-filter="movie">
      D
    </div>
    <div data-filter="study">
      E
    </div>
  </div>

CSS

.slick-wrap{ width: 100%; position: relative; }
    .slick-wrap img{ width: 100%; }
    .dots-theme{ list-style: none; margin: 0 auto 20px auto; padding: 0; }
    .dots-theme li{ display: inline-block; vertical-align: middle; text-align: center; margin: 0 5px 0 0;  }
    .dots-theme li button{ font-size: 0; color: transparent; height: 10px; width: 100px; background: transparent; border: 1px solid #eee; outline: 0; position: relative; cursor: pointer;}
    .dots-theme li button:hover{ background: #efefef; }
    .dots-theme li button > span{ position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: hotpink; width: 0; display: inline-block; }
    .dots-theme li.slick-active button > span{ background: orange; }

JavaScript

$(function(){

  var time = 2,
      $slick = $('.slick-wrap'),
      displayTime = 1000, //시간표시
      transformTime = 50, //크로스 토크 시간
      $progressBar, //백분율
      isPause, //일시정지 여부
      tick, //타이머func
      percentTime; //백분율


/* 실행이 끝나면 다음 페이지가 자동으로 표시되므로 자동 재생이되지 않으므로 hoverpause에도 */
  $slick
  .on('afterChange', function(event, slick, currentSlide){
    //다음 번에 0으로 전환하고 다음 역할을 찾으십시오.
    startProgressbar();
    $progressBar = $slick.find('.dots-theme').find('.slick-active').find('button').find('span');
  })
  .slick({
    infinite: true, // 필수사항
    dots: true,
    dotsClass: 'dots-theme',
    arrows: true,
    fade: true,
    speed: transformTime,
  });

  //매끄러운 매달아 매끄럽게 할 것인지 결정하려면
  $slick.on({
    mouseenter: function() {
      isPause = true;
    },
    mouseleave: function() {
      isPause = false;
    }
  });

  //작동을 위해 각 버튼을 확장하십시오.
  $slick.find('.dots-theme').find('button').append('<span></span>');

  //최초의 스팬의 초기 컨트롤
  $progressBar = $slick.find('.dots-theme').find('li').eq(0).find('button').find('span');
  //진행 시작
  function startProgressbar() {
    resetProgressbar();
    percentTime = 0;
    isPause = false;
    //타이머 실행 빈도
    tick = setInterval(interval, ((displayTime-transformTime)/100));
  }

  //타이머 내용
  function interval() {
    if(isPause === false) {
      percentTime += 1 / (time+0.1);
      $progressBar.css({
        width: percentTime+"%"
      });
      if(percentTime >= 100)
      {
        $slick.slick('slickNext');
        resetProgressbar();
      }
    }
  }

  //다시 제로
  function resetProgressbar() {
    $progressBar.css({
     width: 0+'%' 
    });
    clearTimeout(tick);
  }
  
  //최초의
  startProgressbar();

});