72 lines
2 KiB
JavaScript
72 lines
2 KiB
JavaScript
(function () {
|
|
"use strict";
|
|
|
|
var carousel = document.querySelector("[data-home-carousel]");
|
|
if (!carousel) return;
|
|
|
|
var slides = Array.prototype.slice.call(carousel.querySelectorAll("[data-carousel-slide]"));
|
|
var dots = Array.prototype.slice.call(carousel.querySelectorAll("[data-carousel-dot]"));
|
|
var previous = carousel.querySelector("[data-carousel-previous]");
|
|
var next = carousel.querySelector("[data-carousel-next]");
|
|
var reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
var current = 0;
|
|
var timer = null;
|
|
|
|
function show(index) {
|
|
current = (index + slides.length) % slides.length;
|
|
|
|
slides.forEach(function (slide, slideIndex) {
|
|
var active = slideIndex === current;
|
|
var link = slide.querySelector("a");
|
|
slide.classList.toggle("is-active", active);
|
|
slide.setAttribute("aria-hidden", active ? "false" : "true");
|
|
if (link) link.setAttribute("tabindex", active ? "0" : "-1");
|
|
});
|
|
|
|
dots.forEach(function (dot, dotIndex) {
|
|
var active = dotIndex === current;
|
|
dot.classList.toggle("is-active", active);
|
|
dot.setAttribute("aria-current", active ? "true" : "false");
|
|
});
|
|
}
|
|
|
|
function stop() {
|
|
if (timer) window.clearInterval(timer);
|
|
timer = null;
|
|
}
|
|
|
|
function start() {
|
|
stop();
|
|
if (!reduceMotion && slides.length > 1 && !document.hidden) {
|
|
timer = window.setInterval(function () {
|
|
show(current + 1);
|
|
}, 8000);
|
|
}
|
|
}
|
|
|
|
previous.addEventListener("click", function () {
|
|
show(current - 1);
|
|
start();
|
|
});
|
|
|
|
next.addEventListener("click", function () {
|
|
show(current + 1);
|
|
start();
|
|
});
|
|
|
|
dots.forEach(function (dot, dotIndex) {
|
|
dot.addEventListener("click", function () {
|
|
show(dotIndex);
|
|
start();
|
|
});
|
|
});
|
|
|
|
carousel.addEventListener("mouseenter", stop);
|
|
carousel.addEventListener("mouseleave", start);
|
|
carousel.addEventListener("focusin", stop);
|
|
carousel.addEventListener("focusout", start);
|
|
document.addEventListener("visibilitychange", start);
|
|
|
|
show(0);
|
|
start();
|
|
})();
|