47 lines
1.1 KiB
JavaScript
47 lines
1.1 KiB
JavaScript
// 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);
|
|
});
|
|
} |