slick slide 재생, 정지 게이지바(프로그레스바) - slick progressbar, gaugebar

slick.js

See the Pen slick slide 재생 정지 게이지바 + 다중 슬라이드 연결 예제 (커스텀) by kimyangsun (@kimyangsun) on CodePen.

 

slick slide 재생, 정지 게이지바 + 다중 슬라이드 연결 

코드펜 커스텀 예제입니다.

 

홍성 메인을 작업하면서 들어간 슬라이드인데 소스를 저장해두면 도움이 될거같아서 코드펜에 저장해둔 코드입니다.

재생 정지에 게이지바(프로그레스바) 가 존재하는 슬라이드입니다.

 

// 메인 문화관광 콘텐츠 슬라이드
$(function () {
  var bgSlide = $('.tour-wrap .tour-bg-slide');
  var tourSlide = $('.tour-wrap .tour-slide');
  var time = 2;
  var bar = $('.slide-controller .slide-progress .progress-fill');
  var isPause = false; // 일시정지 상태 여부
  var tick;
  var percentTime;
  var changeWhenPaused; // 일시정지 상태에서 슬라이드를 전환했는지 여부
  var autoplayButton = $('.slide-nav .slide-auto');
  var autoplayButtonText = $('.slide-nav .slide-auto span');
  var controller = $('.slide-controller');
  var pageButton = $('.tour-wrap .content-dots .dot .dot-button');

  tourSlide.slick({
    slidesToShow: 1,
    draggable: false,
    speed: 500,
    autoplay: false,
    fade: true,
    prevArrow: $('.slide-controller .slide-nav .slide-prev'),
    nextArrow: $('.slide-controller .slide-nav .slide-next'),
    asNavFor: bgSlide,
  });
  bgSlide.slick({
    slidesToShow: 1,
    draggable: false,
    speed: 500,
    autoplay: false,
    fade: true,
    arrows: false,
    asNavFor: tourSlide,
  });

  tourSlide.on("beforeChange", function(event, slick, currentSlide) {
    startProgressbar();
    if (isPause) changeWhenPaused = true; // 일시정지 상태일때 슬라이드 전환
  });

  function startProgressbar() {
    resetProgressbar();
    percentTime = 0;
    if (!isPause) {
      tick = setInterval(interval, 30); // 일시정지 상태가 아니면 재생시작
    }
  }

  function interval() {
    if (!isPause) {
      percentTime += 1 / (time + 0.1);
      bar.css({
        width: percentTime + "%"
      });
      if (percentTime >= 100) {
        tourSlide.slick("slickNext");
        startProgressbar();
      }
    }
  }

  function resetProgressbar() {
    bar.css({
      width: 0 + "%"
    });
    clearTimeout(tick);
  }

  autoplayButton.on('click', function(){
    if (!isPause) {
      controller.attr('data-autoplay', 'N');
      isPause = true;
      autoplayButtonText.text('재생하기');
    } else {
      controller.attr('data-autoplay', 'Y');
      isPause = false;
      autoplayButtonText.text('정지하기');
      if (changeWhenPaused) {
        startProgressbar(); // 일시정지 상태에서 슬라이드 전환 후 재생버튼 클릭시 재생시작
        changeWhenPaused = false;
      } 
    }
  });

  pageButton.on('click', function(){
    var target = $(this).attr('data-target');
    tourSlide.slick('slickGoTo', target - 1);
  });

  startProgressbar();
})