Прогресс слайдера, slider progress, stories, сторис

main.js

$(function($){
	const duration = 5;
	const interval = 10;
	const stepsBars = $('.intro-step');
	let isPaused = false;
	let percentTime, step, tick, scaleWidth;
	let currentIndex = 0;

	let introSlider = $('.intro-slider').flickity({
		cellAlign: 'left',
		pageDots: false,
		prevNextButtons: false,
		contain: true,
		imagesLoaded: true,
		dragThreshold: 5,
		adaptiveHeight: true,
		cellSelector: '.intro-slider__slide',
		wrapAround: true
	});

	startProgressbar();

	introSlider.on('change.flickity', function() {
		currentIndex = $('.intro-slider__slide.is-selected').index();
		startProgressbar();
	});

	// Pause control
	introSlider.on('pointerDown.flickity', function(event,pointer) {
		isPaused = true;
	});
	introSlider.on('pointerUp.flickity', function(event,pointer) {
		isPaused = false;
	});

	// Main function
	function startProgressbar() {
		console.log(currentIndex);
		resetProgressbar(currentIndex);
		percentTime = 0;
		isPaused = false;
		tick = window.setInterval(increase, interval);
	}

	function increase() {
		const bar = stepsBars.eq(currentIndex).find('.intro-step__progress');
		if (!isPaused) {
			step = (duration * 1000) / interval;
			percentTime += 100 / step;
			scaleWidth = percentTime / 100;
			bar.css('transform','scale3d('+scaleWidth+',1,1)');
			if (percentTime >= 100) {
				introSlider.flickity('next');
				startProgressbar();
			}
		}
	}

	function resetProgressbar() {
		const bar = stepsBars.eq(currentIndex).find('.intro-step__progress');
		bar.css('transform','scale3d(0,1,1)');
		stepsBars.eq(currentIndex).nextAll(stepsBars).find('.intro-step__progress').css('transform','scale3d(0,1,1)');
		stepsBars.eq(currentIndex).prevAll(stepsBars).find('.intro-step__progress').css('transform','scale3d(1,1,1)');
		clearTimeout(tick);
	}
});