プログレスバースライダー

slick.jsを使用した、プログレスバー付きのスライド

html**


<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>プログレスバースライド</title>
	<script type="text/javascript" src="js/jquery182.js"></script>
	<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
	<script type="text/javascript" src="js/progressbar.js"></script>
	<link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" rel="stylesheet"/>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

			<ul class="feature_list">

                <li class="feature_article">
                	<img src="img/bnr.jpg">
                </li>


                <li class="feature_article">
                	<img src="img/bnr.jpg">
                </li>


                <li class="feature_article">
                	<img src="img/bnr.jpg">
                </li>
                
                <li class="feature_article">
                	<img src="img/bnr.jpg">
                </li>

            </ul><!-- .feature_list -->


</body>
</html>

CSS**

*{
  padding:0;
  margin:0;
}
ul.feature_list{
  width:1000px;
  margin:30px auto 0;
}
ul.feature_list li img{
  width: 100%;
  height: auto;
}

ul.feature_list li .slider-wrapper {
  width: 100%;
}
ul.feature_list li .slider {
  width: 100%;
  height: auto;
  border: 1px solid #000;
}
ul.feature_list li .slide {
  width: 100%;
  height: auto
}
ul.feature_list .slick-dots{
  bottom:25px !important;
}
ul.feature_list .slick-dots li {
  width: 40px;
  height: 5px;
  background: #cecece;
}
ul.feature_list .slick-dots li button {
  width: 40px;
  height: 5px;
}
ul.feature_list .slick-dots li.slick-active,
ul.feature_list .slick-dots li:hover {
  background: #fff;
  position: relative;
}
ul.feature_list .slick-dots li button,
ul.feature_list .slick-dots li button:before {
  color: transparent;
  opacity: 0;
}
/* progress bar */

ul.feature_list li .slider-progress {
  width: 40px;
  height: 5px;
  background: #cecece;
}
ul.feature_list li .slider-progress .progress {
  width: 0%;
  height: 5px;
  background: #fff;
}

JS**

// JavaScript Document

jQuery(function($){
    var $win = $(window);
    var time = 2.5;
    var $bar,
        $featureElm,
        isPause,
        tick,
        percentTime
    ;

    $featureElm = $(".feature_list");
    $bar = $('ul.feature_list .slick-dots li.slick-active .slider-progress .progress');

    // スライドの実行関数
    featureSliderFunc();

    $featureElm.on('swipe', function(event, slick, direction){
        startProgressbar();
    });

    // ページャークリック時にプログレスバーを0％に
    $(document).on("click", ".slider-progress", function(){
        startProgressbar();
    });


    function featureSliderFunc(){
            $featureElm.slick({
                infinite: true,
                dots: true,
                arrows:false,
                draggable: true,
                customPaging : function(slider, i) {
                    return '<div class="slider-progress"><div class="progress"></div></div>';
                },
            });
    }


    function startProgressbar() {
        resetProgressbar();
        percentTime = 0;
        tick = setInterval(interval, 10);
    }


    function interval() {
                percentTime += 1 / (time+0.1);

                $("ul.feature_list .slick-dots li").eq($featureElm.slick("slickCurrentSlide")).find(".progress").css({
                    width: percentTime+"%"
                });
                if(percentTime >= 100) {
                    $featureElm.slick('slickNext');
                    startProgressbar();
                }
    }

    function resetProgressbar() {
        $("ul.feature_list .progress").css({
            width: 0+'%'
        });
        clearTimeout(tick);
    }

    startProgressbar();
});