[slick] slick 슬라이드 (+progress bar)

slick 슬라이드에서 slide-progress bar는 

다음슬라이드로 넘어가기전까지 width:100%을 향해 간다.

(위 움짤에서는 하단에 노란색으로 progress가 있는데 색조합을 잘못해서 잘안보인다ㅠ)

 

var 변수로 sliderTimer 를 빼줘야하고,

autoplaySpeed: sliderTimer 옵션을 따로 추가해야한다.

 

<script id="rendered-js">
jQuery(document).ready(function ($) {
  var sliderTimer = 5000;
  var beforeEnd = 500;
  var $imageSlider = $('.image-slider');
  $imageSlider.slick({
    autoplay: true,
    autoplaySpeed: sliderTimer,
    speed: 1000,
    arrows: true,
    dots: false,
    adaptiveHeight: true,
    //pauseOnFocus: false,
    //pauseOnHover: false,
    variableWidth: false,

    infinite: true,
    //centerMode: true,
    //centerPadding: '60px',
    slidesToShow: 2,
    responsive: [
    {
      breakpoint: 1200,
      settings: {
      slidesToShow: 3,
      //slidesToScroll: 2,
      infinite: true,
      autoplay: true
      //slidesToScroll: 3,
    }
  },
  {
  breakpoint: 1024,
  settings: {
    //variableWidth: true,
    slidesToShow: 1,
    //slidesToScroll: 2,
    infinite: true,
    autoplay: true
    }
  }

  ]
  });


  function progressBar() {
    $('.slider-progress').find('span').removeAttr('style');
    $('.slider-progress').find('span').removeClass('active');
    setTimeout(function () {
      $('.slider-progress').find('span').css('transition-duration', sliderTimer / 1000 + 's').addClass('active');
    }, 100);
  }
  progressBar();
  $imageSlider.on('beforeChange', function (e, slick) {
    progressBar();
  });
  $imageSlider.on('afterChange', function (e, slick, nextSlide) {
    titleAnim(nextSlide);
  });

  // Title Animation JS
  function titleAnim(ele) {
   // $imageSlider.find('.slick-current').find('h1').addClass('show');
    setTimeout(function () {
      //$imageSlider.find('.slick-current').find('h1').removeClass('show');
    }, sliderTimer - beforeEnd);
  }
  titleAnim();
});

</script>

<div class="slider-wrap">
  <div class="slider_inner">
    <div class="image-slider">
      <div class="img-wrap">
        <span></span>
        <dl>
        <dt>아침 식사 대응으로 구입했습니다. </dt>
        <dd>아침에 식사 대용으로 구입하였습니다. </dd>
        </dl>
      </div>
      <div class="img-wrap">
        <span></span>
        <dl>
        <dt>아침 식사 대응으로 구입했습니다. </dt>
        <dd>아침에 식사 대용으로 구입하였습니다. </dd>
        </dl>
      </div>
      <div class="img-wrap">
        <span></span>
        <dl>
        <dt>아침 식사 대응으로 구입했습니다. </dt>
        <dd>아침에 식사 대용으로 구입하였습니다. </dd>
        </dl>
      </div>
      <div class="img-wrap">
        <span></span>
        <dl>
        <dt>아침 식사 대응으로 구입했습니다. </dt>
        <dd>아침에 식사 대용으로 구입하였습니다. </dd>
        </dl>
      </div>
      <div class="img-wrap">
      <span></span>
        <dl>
        <dt>아침 식사 대응으로 구입했습니다. </dt>
        <dd>아침에 식사 대용으로 구입하였습니다. </dd>
        </dl>
      </div>
      <div class="img-wrap">
        <span></span>
        <dl>
        <dt>아침 식사 대응으로 구입했습니다. </dt>
        <dd>아침에 식사 대용으로 구입하였습니다. </dd>
        </dl>
      </div>
      <div class="img-wrap">
        <span></span>
        <dl>
        <dt>아침 식사 대응으로 구입했습니다. </dt>
        <dd>아침에 식사 대용으로 구입하였습니다. </dd>
        </dl>
      </div>
      <div class="img-wrap">
        <span></span>
        <dl>
        <dt>아침 식사 대응으로 구입했습니다. </dt>
        <dd>아침에 식사 대용으로 구입하였습니다. </dd>
        </dl>
      </div>
    </div>
    
    <div class="slider-progress">
      <span></span>
    </div>
  </div>
</div>

span은 외쪽 까만 동그라미!

 

.slider-wrap{height:900px; }
.slider-progress{position: absolute;left: 0;bottom: 0;width: 100%;height: 5px;}
.slider-progress span{position: absolute;left: 0;bottom: 0;display: block;width: 0px;height: 100%;background-color: rgba(233, 233, 120, 0.7);transition: all 0s linear;}
.slider-progress span.active{width: 100%;}
.img-wrap{position:relative; height:300px; background:yellowgreen; padding:30px;}
.img-wrap span{position:absolute; width:100px; height:100px; background:black; border-radius:50%; }
.img-wrap dl{margin-left:150px;}
.img-wrap dl dt{font-size:15px; color:#444;}
.img-wrap dl dd{}
.slider_inner{position:relative; width:100%; max-width:1400px; margin:0 auto; border:1px solid red;}
.slick-list{overflow:visible !important; margin:0 -12.5px;}
.slick-slide{padding:0 12.5px;}