79 lines
2.2 KiB
JavaScript
79 lines
2.2 KiB
JavaScript
function initCarousel(container, options = {}) {
|
|
const durationMS = options.durationMS ?? 0;
|
|
const onChange = options.onChange ?? (() => {});
|
|
|
|
const numCarouselItems = container.querySelectorAll('.carousel-item').length;
|
|
const buttonContainer = container.querySelector('.carousel-buttons');
|
|
|
|
let current = 0;
|
|
function activateCarousel(i, silent = false) {
|
|
const items = document.querySelectorAll('.carousel-item');
|
|
for (const item of items) {
|
|
item.classList.remove('active');
|
|
}
|
|
items[i].classList.add('active');
|
|
|
|
const smallItems = document.querySelectorAll('.carousel-item-small');
|
|
if (smallItems.length > 0) {
|
|
for (const item of smallItems) {
|
|
item.classList.remove('active');
|
|
}
|
|
smallItems[i].classList.add('active');
|
|
}
|
|
|
|
const buttons = document.querySelectorAll('.carousel-button');
|
|
for (const button of buttons) {
|
|
button.classList.remove('active');
|
|
}
|
|
buttons[i].classList.add('active');
|
|
|
|
current = i;
|
|
|
|
if (!silent) {
|
|
onChange(current);
|
|
}
|
|
}
|
|
|
|
function activateNext() {
|
|
activateCarousel((current + numCarouselItems + 1) % numCarouselItems);
|
|
}
|
|
|
|
function activatePrev() {
|
|
activateCarousel((current + numCarouselItems - 1) % numCarouselItems);
|
|
}
|
|
|
|
const carouselTimer = durationMS > 0 && setInterval(() => {
|
|
if (numCarouselItems === 0) {
|
|
return;
|
|
}
|
|
activateNext();
|
|
}, durationMS);
|
|
|
|
function carouselButtonClick(i) {
|
|
activateCarousel(i);
|
|
if (carouselTimer) {
|
|
clearInterval(carouselTimer);
|
|
}
|
|
}
|
|
|
|
for (let i = 0; i < numCarouselItems; i++) {
|
|
const button = document.createElement('div');
|
|
button.classList.add('carousel-button', 'br-pill', 'w1', 'h1', 'mh2');
|
|
button.classList.toggle('active', i === 0);
|
|
|
|
const clickIndex = i;
|
|
button.addEventListener('click', () => {
|
|
carouselButtonClick(clickIndex);
|
|
});
|
|
|
|
buttonContainer.appendChild(button);
|
|
}
|
|
|
|
activateCarousel(0, true);
|
|
|
|
return {
|
|
next: activateNext,
|
|
prev: activatePrev,
|
|
};
|
|
}
|