Building a Simple Progress Bar for Slick Slider

HTML

<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<span class="slider__label sr-only">
</div>

CSS ( or in this case some SCSS )

.progress {
display: block;
width: 100%;
height: 10px;
border-radius: 10px;
overflow: hidden;

background-color: #f5f5f5;
background-image: linear-gradient(to right, black, black);
background-repeat: no-repeat;
background-size: 0 100%;
transition: background-size .4s ease-in-out;
}

jQuery

$(document).ready(function() {
var $slider = $('.slider');
var $progressBar = $('.progress');
var $progressBarLabel = $( '.slider__label' );

$slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var calc = ( (nextSlide) / (slick.slideCount-1) ) * 100;

$progressBar
.css('background-size', calc + '% 100%')
.attr('aria-valuenow', calc );

$progressBarLabel.text( calc + '% completed' );
});

$slider.slick({
slidesToShow: 3,
slidesToScroll: 1,
speed: 400
});
});

The Completed Progress Bar

Updates

$('.slider').on('init', function(event, slick) {
// the init event must be declared before the
// carousel
var count = slick.slideCount;
var current = slick.currentSlide;
calcProgress( count, current );
});
$('.slider').on('afterChange', function(event, slick) {
var count = slick.slideCount;
var current = slick.currentSlide;
calcProgress( count, current );
});
$('.slider').on('init afterChange', function(event, slick) {
var count = slick.slideCount;
var current = slick.currentSlide;
calcProgress( count, current );
});
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<span class="progress__true"></span>
<span class="slider__label sr-only">
</div>
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">   
<span class="slider__label sr-only">
</div>

--

--

--

Front-End & WordPress Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Michael Weaver

Michael Weaver

Front-End & WordPress Developer

More from Medium

SYNTAX VS SEMANTICS; NAMING CSS CLASSES

Interactive SNES Controller in HTML + CSS

JavaScript add rows to the table dynamically

HTML

SASS → (SAssy CSS)