92 lines
3.2 KiB
JavaScript
92 lines
3.2 KiB
JavaScript
import Events from "../_events";
|
|
import Carousel from "bootstrap/js/src/carousel";
|
|
|
|
const CarouselUI = ((window) => {
|
|
const NAME = "js-carousel";
|
|
|
|
const init = () => {
|
|
console.log(`${NAME}: init`);
|
|
|
|
document.querySelectorAll(`.${NAME}`).forEach((el, i) => {
|
|
const carousel = new Carousel(el);
|
|
// create next/prev arrows
|
|
if (el.dataset.bsArrows) {
|
|
const next = document.createElement("button");
|
|
next.classList.add("carousel-control-next");
|
|
next.setAttribute("type", "button");
|
|
next.setAttribute("aria-label", "Next Slide");
|
|
next.setAttribute("data-bs-target", el.getAttribute("id"));
|
|
next.setAttribute("data-bs-slide", "next");
|
|
next.addEventListener("click", (e) => {
|
|
carousel.next();
|
|
});
|
|
next.innerHTML =
|
|
'<span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next</span>';
|
|
el.appendChild(next);
|
|
|
|
const prev = document.createElement("button");
|
|
prev.setAttribute("type", "button");
|
|
prev.setAttribute("aria-label", "Previous Slide");
|
|
prev.classList.add("carousel-control-prev");
|
|
prev.setAttribute("data-bs-target", el.getAttribute("id"));
|
|
prev.setAttribute("data-bs-slide", "prev");
|
|
prev.addEventListener("click", (e) => {
|
|
carousel.prev();
|
|
});
|
|
prev.innerHTML =
|
|
'<span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous</span>';
|
|
el.appendChild(prev);
|
|
}
|
|
|
|
if (el.dataset.bsIndicators) {
|
|
const indicators = document.createElement("div");
|
|
indicators.classList.add("carousel-indicators");
|
|
const items = el.querySelectorAll(".carousel-item");
|
|
let i = 0;
|
|
while (i < items.length) {
|
|
const ind = document.createElement("button");
|
|
ind.setAttribute("type", "button");
|
|
ind.setAttribute("aria-label", `Slide to #${i + 1}`);
|
|
if (i == 0) {
|
|
ind.classList.add("active");
|
|
}
|
|
ind.setAttribute("data-bs-target", el.getAttribute("id"));
|
|
ind.setAttribute("data-bs-slide-to", i);
|
|
|
|
ind.addEventListener("click", (e) => {
|
|
const target = e.target;
|
|
carousel.to(target.getAttribute("data-bs-slide-to"));
|
|
indicators.querySelectorAll(".active").forEach((ind2) => {
|
|
ind2.classList.remove("active");
|
|
});
|
|
target.classList.add("active");
|
|
});
|
|
|
|
indicators.appendChild(ind);
|
|
i++;
|
|
}
|
|
|
|
el.appendChild(indicators);
|
|
el.addEventListener("slide.bs.carousel", (e) => {
|
|
el.querySelectorAll(".carousel-indicators .active").forEach(
|
|
(ind2) => {
|
|
ind2.classList.remove("active");
|
|
}
|
|
);
|
|
el.querySelectorAll(
|
|
`.carousel-indicators [data-bs-slide-to="${e.to}"]`
|
|
).forEach((ind2) => {
|
|
ind2.classList.add("active");
|
|
});
|
|
});
|
|
}
|
|
el.classList.add(`${NAME}-active`);
|
|
});
|
|
};
|
|
|
|
window.addEventListener(`${Events.LODEDANDREADY}`, init);
|
|
window.addEventListener(`${Events.AJAX}`, init);
|
|
})(window);
|
|
|
|
export default CarouselUI;
|