// Add the code in main banner js code, before it's last closing bracket

// Idm-pagination
const paginationContainer = document.createElement('div');
paginationContainer.id = 'idm-pagination';
mainBannerElement.appendChild(paginationContainer);

const slidesLength = slidesCount.length;
const bars = [];

for (let i = 0; i < slidesLength; i++) {
	const bar = document.createElement('div');
	bar.className = 'bar';
	
	const fill = document.createElement('div');
	fill.className = 'fill';
	
	bar.appendChild(fill);
	paginationContainer.appendChild(bar);
	bars.push(fill);
}

let activeIndex = 0;
let autoplayDuration = sliderAutoplaySpeed || 5000;

function animateBar(index) {
	bars.forEach((bar, i) => {
		bar.style.transition = 'none';
		bar.style.width = i < index ? '100%' : '0%';
	});
	
	const current = bars[index];
	if (!current) return;
	
	void current.offsetWidth; // force reflow
	current.style.transition = `width ${autoplayDuration}ms linear`;
	current.style.width = '100%';
}

if (autoplayEnable) {
	animateBar(activeIndex);
	
	mainBanner.watchEvent('slideChange', (swiper) => {
		activeIndex = swiper.realIndex;
		animateBar(activeIndex);
	});
}