diff --git a/banner-autofill-pagination/index.js b/banner-autofill-pagination/index.js new file mode 100644 index 0000000..76f6a8c --- /dev/null +++ b/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); + }); +} \ No newline at end of file diff --git a/banner-autofill-pagination/index.less b/banner-autofill-pagination/index.less new file mode 100644 index 0000000..e987a1b --- /dev/null +++ b/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; +} \ No newline at end of file