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);
+	});
+}

banner-autofill-pagination/index.less

@@ -0,0 +1,29 @@
+// IdoMods Custom Pagination
+#idm-pagination {
+  display: flex;
+  gap: 1rem;
+  position: absolute;
+  left: 50%;
+  bottom: -1.6rem;
+  transform: translateX(-50%);
+  z-index: 10;
+}
+
+#idm-pagination .bar {
+  min-width: 4rem;
+  flex: 1;
+  height: 3px;
+  background-color: #C8C8C8;
+  overflow: hidden;
+  position: relative;
+}
+
+#idm-pagination .fill {
+  background-color: @less_idmcolorscheme_primary_black;
+  height: 100%;
+  width: 0%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: width linear;
+}