Monthly Calendars
https://cdn.tailwindcss.com
body {
font-family: 'Inter', sans-serif;
}
.carousel-inner {
display: flex;
transition: transform 0.5s ease-in-out;
}
.carousel-item {
min-width: 100%;
box-sizing: border-box;
}
function createCarousel(images, altTextPrefix, carouselId) {
const carouselWrapper = document.createElement('div');
carouselWrapper.className = 'relative px-6 sm:px-12';
const carouselEl = document.createElement('div');
carouselEl.className = 'carousel relative overflow-hidden rounded-lg shadow-lg bg-gray-100';
carouselEl.setAttribute('data-id', carouselId);
const carouselInnerEl = document.createElement('div');
carouselInnerEl.className = 'carousel-inner';
images.forEach((imgSrc, index) => {
const carouselItemEl = document.createElement('div');
carouselItemEl.className = 'carousel-item p-2';
const imgEl = document.createElement('img');
imgEl.src = imgSrc;
imgEl.alt = `${altTextPrefix} - Image ${index + 1}`;
imgEl.className = 'w-full h-auto object-contain rounded-lg';
imgEl.onerror = function() {
this.src = 'https://placehold.co/1200x800/f8f8f8/ccc?text=Image+Not+Found';
this.alt = 'Image not found';
};
carouselItemEl.appendChild(imgEl);
carouselInnerEl.appendChild(carouselItemEl);
});
carouselEl.appendChild(carouselInnerEl);
carouselWrapper.appendChild(carouselEl);
if (images.length > 1) {
const prevButton = document.createElement('button');
prevButton.className = 'prev-btn absolute top-1/2 left-2 sm:left-3 -translate-y-1/2 bg-white/70 backdrop-blur-sm rounded-full p-2 text-gray-800 hover:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition z-10';
prevButton.innerHTML = '';
const nextButton = document.createElement('button');
nextButton.className = 'next-btn absolute top-1/2 right-2 sm:right-3 -translate-y-1/2 bg-white/70 backdrop-blur-sm rounded-full p-2 text-gray-800 hover:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition z-10';
nextButton.innerHTML = '';
carouselWrapper.appendChild(prevButton);
carouselWrapper.appendChild(nextButton);
let currentIndex = 0;
const totalSlides = images.length;
function updateCarousel() {
carouselInnerEl.style.transform = `translateX(-${currentIndex * 100}%)`;
}
prevButton.addEventListener('click', () => {
currentIndex = (currentIndex > 0) ? currentIndex - 1 : totalSlides - 1;
updateCarousel();
});
nextButton.addEventListener('click', () => {
currentIndex = (currentIndex {
const locationEl = document.createElement('div');
locationEl.className = 'location-group';
const headingEl = document.createElement('h2');
headingEl.className = 'text-2xl sm:text-3xl font-bold text-gray-800 mb-4 sm:mb-6';
headingEl.textContent = location.name;
locationEl.appendChild(headingEl);
if (location.may_images && location.may_images.length > 0) {
const mayHeading = document.createElement('h3');
mayHeading.className = 'text-xl font-semibold text-gray-700 mb-3';
mayHeading.textContent = 'May';
locationEl.appendChild(mayHeading);
const mayCarousel = createCarousel(location.may_images, location.name + ' May', locationIndex + '-may');
locationEl.appendChild(mayCarousel);
}
galleryContainer.appendChild(locationEl);
});
});