56 lines
2.0 KiB
JavaScript
56 lines
2.0 KiB
JavaScript
const collapsibleButton = document.querySelector("#hamburger-menu");
|
|
const menuContent = document.querySelector(".menu-content");
|
|
collapsibleButton.addEventListener("click", function () {
|
|
menuContent.classList.toggle("active");
|
|
if (menuContent.style.display === "block") {
|
|
menuContent.style.display = "none";
|
|
} else {
|
|
menuContent.style.display = "block";
|
|
}
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
fetch('../assets/js/carousel-items.json')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
createCarouselItems(data);
|
|
initializeCarousel();
|
|
})
|
|
.catch(error => console.error('Error loading JSON:', error));
|
|
});
|
|
|
|
function createCarouselItems(items) {
|
|
const carousel = document.querySelector('.carousel');
|
|
items.forEach(item => {
|
|
const itemDiv = document.createElement('div');
|
|
itemDiv.className = 'carousel-item';
|
|
itemDiv.innerHTML = `<a class="carousel-link" target="_blank" rel="noopener noreferrer" href="${item.link}">${item.description}</a>`;
|
|
carousel.appendChild(itemDiv);
|
|
});
|
|
}
|
|
|
|
function initializeCarousel() {
|
|
const carousel = document.querySelector('.carousel');
|
|
const items = Array.from(carousel.children);
|
|
const totalItems = items.length;
|
|
const middleIndex = Math.floor(totalItems / 2);
|
|
let currentIndex = -middleIndex;
|
|
|
|
function cycleItems() {
|
|
currentIndex = (currentIndex - 1 + totalItems) % totalItems;
|
|
updateCarouselItems();
|
|
}
|
|
|
|
function updateCarouselItems() {
|
|
items.forEach((item, index) => {
|
|
let positionIndex = (currentIndex + index + totalItems) % totalItems;
|
|
let offset = positionIndex - middleIndex;
|
|
item.style.transform = `translateY(${offset * 100}%)`;
|
|
item.classList.toggle('active', positionIndex === middleIndex);
|
|
item.style.visibility = 'visible';
|
|
});
|
|
}
|
|
|
|
updateCarouselItems();
|
|
setInterval(cycleItems, 7000);
|
|
} |