slick slider progress bar and page fraction example

프로그래스 바 + 페이징 fraction 들어간 slick slider

 

See the Pen slick slider progress bar and page fraction example by publisher.kim (@publisherkim) on CodePen.

 

 

 

html

<div class="slide_wrap">
  <div class="slick_slider">
    <div class="item item1">
      첫번째 슬라이드
    </div>
      <div class="item item2">
      두번째 슬라이드
    </div>
  </div>
  <div class="slider_etc">
    <div class="slide_info">
      <div class="slide_paging"></div>
      <div class="slide_progress"><div class="progress"></div></div>
      </div>
    <div class="slide_btns">
      <button class="btn_prev">이전</button>
      <button class="btn_playcontrol pause">멈춤</button>
      <button class="btn_next">다음</button>
    </div>
  </div>
</div>

 

css

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

.slide_wrap{width:600px; height:300px;  margin: 0 auto;}
.slide_wrap .item{width:100%; height:300px; box-sizing:border-box; padding: 30px; font-size: 20px; font-family: 'pretendard';}
.slide_wrap .item1{background: rgb(90,207,172);}
.slide_wrap .item2{background: rgb(239,146,128);}

.slide_wrap .slide_btns, .slide_wrap .slide_info, .slide_wrap .slide_paging{display:inline-block; vertical-align: middle;}
.slide_wrap .slider_etc{text-align: right;}
.slide_wrap .slide_paging{font-family: 'pretendard'; font-size: 13px;  padding-top:5px; width:50px; text-align: left;}
.slide_wrap .slide_info .slide_progress {height: 2px; width: 110px; display: inline-block;}
.slide_wrap .slide_info .slide_progress .progress {height: 2px; background: #5aa6a8;}
.slide_wrap .slide_btns button{display: inline-block;width:11px; height:11px; border:0; font-size:0; cursor: pointer; padding: 0; vertical-align: middle;}
.slide_wrap .slide_btns .btn_playcontrol{background: url(https://umings.github.io/images/btn_slide_play.png) no-repeat center;}
.slide_wrap .slide_btns .btn_playcontrol.pause{background: url(https://umings.github.io/images/btn_slide_pause.png) no-repeat center;}
.slide_wrap .slide_btns .btn_prev{background: url(https://umings.github.io/images/btn_slide_prev2.png) no-repeat center;}
.slide_wrap .slide_btns .btn_next{background: url(https://umings.github.io/images/btn_slide_next2.png) no-repeat center;}

 

js *jqeury 필요

$(document).ready(function () {
  var time = 3;
    var isPause,
        tick,
        percentTime;
    var $bar = $('.slide_progress .progress');
    var $status = $('.slide_wrap .slide_paging');
    var $slick_carousel = $(".slide_wrap .slick_slider");
    $slick_carousel.on('init', function(event, slick) {
        $(".slick_slider .item").eq(0).addClass("active");
    });
    $slick_carousel.on('afterChange', function(event, slick, currentSlide){
        $(".slick_slider .item").removeClass("active");
        $(this).find(".item").eq(currentSlide).addClass("active")
    });
    $slick_carousel.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
        var i = (currentSlide ? currentSlide : 0) + 1;
        $status.html('<span class="count">'+'0'+ i + '</span> / <span class="pagecount">' +'0'+ slick.slideCount + '</span>');
    }); 
    $('.slick_slider').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false
    });
    $(".btn_playcontrol").click(function(){
      if($(this).hasClass("pause")){
        $(this).removeClass("pause")
        isPause = true;
      }else{
        $(this).addClass("pause")
        isPause = false;
      }
    })
    function startProgressbar() {
        resetProgressbar();
        percentTime = 0;
        isPause = false;
        tick = setInterval(interval, 10);
    }
    function interval() {
        if (isPause === false) {
            percentTime += 1 / (time + 0.1);
            $bar.css({
            width: percentTime + "%"
            });
            if (percentTime >= 100) {
            $slick_carousel.slick('slickNext');
            startProgressbar();
            }
        }
    }
    function resetProgressbar() {
        $bar.css({
            width: 0 + '%'
        });
        clearTimeout(tick);
    }
    startProgressbar();

    $('.btn_prev').click(function() {
        $(".slick_slider").slick('slickPrev');
        if ($(".btn_playcontrol").hasClass("pause")){
            startProgressbar();
        } 
    });
    $('.btn_next').click(function() {
        $(".slick_slider").slick('slickNext');
        if ($(".btn_playcontrol").hasClass("pause")){
            startProgressbar();
        }
    });
  
})