Update js/carousel.js

js/carousel.js

@@ -0,0 +1,110 @@
+let currentSlideIndex = 0;
+let slides = [];
+
+function openCarouselModal(images, title = '') {
+    const modal = document.getElementById('carouselModal');
+    const slidesContainer = modal.querySelector('.carousel-slides');
+    const modalTitle = modal.querySelector('.carousel-title');
+    
+    // Set the title
+    if (modalTitle) {
+        modalTitle.textContent = title;
+    }
+    
+    // Clear previous slides
+    slidesContainer.innerHTML = '';
+    slides = images;
+    
+    // Create slides
+    images.forEach((imageUrl, index) => {
+        const slide = document.createElement('div');
+        slide.className = `carousel-slide ${index === 0 ? 'active' : ''}`;
+        
+        const img = document.createElement('img');
+        img.src = imageUrl;
+        img.alt = `Slide ${index + 1}`;
+        
+        slide.appendChild(img);
+        slidesContainer.appendChild(slide);
+    });
+    
+    currentSlideIndex = 0;
+    modal.classList.add('active');
+}
+
+function closeCarouselModal() {
+    const modal = document.getElementById('carouselModal');
+    modal.classList.remove('active');
+}
+
+function showSlide(index) {
+    const slidesContainer = document.querySelector('.carousel-slides');
+    const slideElements = slidesContainer.querySelectorAll('.carousel-slide');
+    
+    // Handle circular navigation
+    if (index >= slides.length) index = 0;
+    if (index < 0) index = slides.length - 1;
+    
+    // Update active slide
+    slideElements.forEach(slide => slide.classList.remove('active'));
+    slideElements[index].classList.add('active');
+    
+    currentSlideIndex = index;
+}
+
+function nextSlide() {
+    showSlide(currentSlideIndex + 1);
+}
+
+function prevSlide() {
+    showSlide(currentSlideIndex - 1);
+}
+
+// Add click event listeners to submenu items
+// Update the click event listener
+document.addEventListener('DOMContentLoaded', () => {
+    const submenuItems = document.querySelectorAll('.dropdown-item');
+    
+    submenuItems.forEach(item => {
+        item.addEventListener('click', (e) => {
+            e.preventDefault();
+            
+            // Skip carousel for social media links
+            if (item.querySelector('.fab') || item.querySelector('svg[viewBox="0 0 24 24"]')) {
+                // For social media links, just prevent default behavior
+                return;
+            }
+            
+            // Get the button text
+            const buttonTitle = item.textContent.trim();
+            
+            // Get data attributes from the clicked item
+            const imageUrls = [
+                'https://picsum.photos/800/600?random=1',
+                'https://picsum.photos/800/600?random=2',
+                'https://picsum.photos/800/600?random=3',
+                'https://picsum.photos/800/600?random=4',
+                'https://picsum.photos/800/600?random=5'
+            ];
+            
+            openCarouselModal(imageUrls, buttonTitle);
+        });
+    });
+
+    
+    // Close modal when clicking outside the carousel content
+    document.getElementById('carouselModal').addEventListener('click', (e) => {
+        if (e.target.classList.contains('carousel-modal')) {
+            closeCarouselModal();
+        }
+    });
+    
+    // Handle keyboard navigation
+    document.addEventListener('keydown', (e) => {
+        if (!document.getElementById('carouselModal').classList.contains('active')) return;
+        
+        if (e.key === 'Escape') closeCarouselModal();
+        if (e.key === 'ArrowLeft') prevSlide();
+        if (e.key === 'ArrowRight') nextSlide();
+    });
+});