65 lines
2.2 KiB
JavaScript
65 lines
2.2 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'
|
|
|
|
const link = document.createElement('a');
|
|
link.className = 'carousel-link';
|
|
link.href = item.link;
|
|
link.target = '_blank';
|
|
link.rel = 'noopener noreferrer';
|
|
const linkText = document.createTextNode(item.description);
|
|
|
|
link.appendChild(linkText);
|
|
itemDiv.appendChild(link);
|
|
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);
|
|
} |