(function () { "use strict"; // Swipe detector // https://gist.github.com/chrishaensel/e17c9f3838f246d75fe3bd19d6bb92e8#file-swipe-js let swipe = { touchStartX: 0, touchEndX: 0, minSwipePixels: 30, detectionZone: undefined, swipeCallback: function () {}, init: function (detectionZone, callback) { swipe.swipeCallback = callback; detectionZone.addEventListener( "touchstart", function (event) { swipe.touchStartX = event.changedTouches[0].screenX; }, false ); detectionZone.addEventListener( "touchend", function (event) { swipe.touchEndX = event.changedTouches[0].screenX; swipe.handleSwipeGesture(); }, false ); }, handleSwipeGesture: function () { let direction, moved; if (swipe.touchEndX <= swipe.touchStartX) { moved = swipe.touchStartX - swipe.touchEndX; direction = "left"; } if (swipe.touchEndX >= swipe.touchStartX) { moved = swipe.touchEndX - swipe.touchStartX; direction = "right"; } if (moved > swipe.minSwipePixels && direction !== "undefined") { swipe.swipe(direction, moved); } }, swipe: function (direction, movedPixels) { let ret = {}; ret.direction = direction; ret.movedPixels = movedPixels; swipe.swipeCallback(ret); }, }; const carousels = document.getElementsByClassName("carousel-items"); // Rotate the carousel forward or backward function rotateCarousel(el, dir) { if (dir === undefined) { dir = "next"; } let currentItem = el.getElementsByClassName("carousel-item is-active")[0]; let nextItem = dir === "next" ? currentItem.nextElementSibling : currentItem.previousElementSibling; let index = currentItem.getAttribute("data-carousel"); let currentBullet = el.parentNode.getElementsByClassName("carousel-bullet")[ index ]; let nextBullet = dir === "next" ? currentBullet.nextElementSibling : currentBullet.previousElementSibling; currentItem.classList.remove("is-active"); currentBullet.classList.remove("is-active"); if (nextItem) { nextItem.classList.add("is-active"); nextBullet.classList.add("is-active"); } else { if (dir === "next") { el.firstElementChild.classList.add("is-active"); el.parentNode .getElementsByClassName("carousel-bullets")[0] .firstElementChild.classList.add("is-active"); } else { el.lastElementChild.classList.add("is-active"); el.parentNode .getElementsByClassName("carousel-bullets")[0] .lastElementChild.classList.add("is-active"); } } } // Equal heights fix function equalHeightCarousel(carousel, items) { let taller = 0; let height; for (let i = 0; i < items.length; i++) { items[0].parentNode.style.minHeight = taller + "px"; items[i].classList.add("is-loading"); height = items[i].offsetHeight; items[i].classList.remove("is-loading"); if (height > taller) { taller = height; } } items[0].parentNode.style.minHeight = taller + "px"; } // Clear autorotate function clearAutorotate(autorotate) { if (autorotate) { clearInterval(autorotate); } } if (carousels.length > 0) { for (let i = 0; i < carousels.length; i++) { let carousel = carousels[i]; let items = carousel.getElementsByClassName("carousel-item"); let activeItem = 0; let autorotateTiming = carousel.getAttribute("data-autorotate"); // Generate bullets container const bulletsContainer = document.createElement("div"); bulletsContainer.className = "carousel-bullets"; carousel.parentNode.insertBefore(bulletsContainer, carousel.nextSibling); for (let i = 0; i < items.length; i++) { // Add data attributes items[i].setAttribute("data-carousel", i); // Determine a new active item, if any if (items[i].classList.contains("is-active")) activeItem = i; // Generate bullets let bullet = document.createElement("button"); bullet.className = "carousel-bullet"; bullet.setAttribute("data-bullet", i); carousel.parentNode .getElementsByClassName("carousel-bullets")[0] .appendChild(bullet); } // Add is-active class to first carousel item and bullet items[activeItem].classList.add("is-active"); let bullets = carousel.parentNode.getElementsByClassName( "carousel-bullet" ); bullets[activeItem].classList.add("is-active"); // Equal height items equalHeightCarousel(carousel, items); window.addEventListener("resize", function () { equalHeightCarousel(carousel, items); }); // Autorotate let autorotate = false; if (autorotateTiming) { autorotate = setInterval(function () { rotateCarousel(carousel, "next"); }, autorotateTiming); } // Rotate by bullet click for (let i = 0; i < bullets.length; i++) { let bullet = bullets[i]; bullet.addEventListener("click", function (e) { e.preventDefault(); // Do nothing if item is active if (bullet.classList.contains("is-active")) { return; } // Remove active classes for (let i = 0; i < bullets.length; i++) { bullets[i].classList.remove("is-active"); } for (let i = 0; i < items.length; i++) { items[i].classList.remove("is-active"); } // Add active classes to corresponding items and bullets let index = this.getAttribute("data-bullet"); items[index].classList.add("is-active"); this.classList.add("is-active"); // Clear autorotate timing clearAutorotate(autorotate); }); } // Rotate on swipe swipe.init(carousel, function (e) { if (e.direction === "left") { rotateCarousel(carousel, "next"); } else if (e.direction === "right") { rotateCarousel(carousel, "prev"); } // Clear autorotate timing clearAutorotate(autorotate); }); } } })();