Add autofill banner pagination feature

banner-autofill-pagination/index.js

@@ -0,0 +1,47 @@
+// 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);
+	});
+}