プログレスバースライダー
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(); });