.carousel-container { max-width: 1200px; margin: 20px auto; overflow: hidden; position: relative; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); border-radius: 8px; } .carousel { display: flex; transition: transform 0.5s ease-in-out; height: 100%; } .carousel-item { min-width: 100%; display: flex; flex-direction: row; } .carousel-image { flex: 1; background-size: cover; background-position: top center; min-height: 400px; } .carousel-content { flex: 1; padding: 40px; display: flex; flex-direction: column; justify-content: center; } .carousel-content h2 { margin-bottom: 20px; font-size: 28px; color: #2c3e50;line-height: 1.25; } .carousel-content p { margin-bottom: 20px; font-size: 16px; line-height: 1.8; } .carousel-indicators { display: flex; justify-content: center; position: absolute; bottom: 20px; width: 100%; } .indicator { width: 12px; height: 12px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); margin: 0 5px; cursor: pointer; transition: background-color 0.3s ease; } .indicator.active { background-color: white; } .carousel-bt { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(255, 255, 255, 0.3) !important; border: none; color: #555 !important; font-size: 24px !important; padding: 10px 10px !important; cursor: pointer; border-radius: 5% !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); z-index: 10; transition: all 0.3s ease; } .carousel-bt:hover { background-color: rgba(255, 255, 255, 0.9); } .carousel-bt.prev { left: 0px; } .carousel-bt.next { right: 0px; } /* Media query for mobile responsiveness */ @media screen and (max-width: 768px) { .carousel-item { flex-direction: column; } .carousel-image { min-height: 500px; } .carousel-content { padding: 25px; } .carousel-content h2 { font-size: 22px; margin-bottom: 10px; } .carousel-content p { font-size: 14px; margin-bottom: 10px; } .carousel-bt { font-size: 18px; padding: 8px 12px; } } document.addEventListener('DOMContentLoaded', function() { const carousel = document.querySelector('.carousel'); const items = document.querySelectorAll('.carousel-item'); const indicators = document.querySelectorAll('.indicator'); const prevBtn = document.querySelector('.carousel-bt.prev'); const nextBtn = document.querySelector('.carousel-bt.next'); let currentIndex = 0; const totalItems = items.length; let autoRotateInterval; // Function to move to a specific slide function goToSlide(index) { if (index = totalItems) { index = 0; } carousel.style.transform = `translateX(${-index * 100}%)`; currentIndex = index; // Update indicators indicators.forEach((indicator, i) => { if (i === currentIndex) { indicator.classList.add('active'); } else { indicator.classList.remove('active'); } }); } // Set up auto-rotation function startAutoRotate() { autoRotateInterval = setInterval(() => { goToSlide(currentIndex + 1); }, 5000); // Change slide every 5 seconds } function stopAutoRotate() { clearInterval(autoRotateInterval); } // Initialize auto-rotation startAutoRotate(); // Event listeners for navigation buttons prevBtn.addEventListener('click', () => { stopAutoRotate(); goToSlide(currentIndex - 1); startAutoRotate(); }); nextBtn.addEventListener('click', () => { stopAutoRotate(); goToSlide(currentIndex + 1); startAutoRotate(); }); // Event listeners for indicators indicators.forEach(indicator => { indicator.addEventListener('click', () => { stopAutoRotate(); const index = parseInt(indicator.getAttribute('data-index')); goToSlide(index); startAutoRotate(); }); }); // Pause rotation when hovering over carousel carousel.addEventListener('mouseenter', stopAutoRotate); carousel.addEventListener('mouseleave', startAutoRotate); // Handle touch events for mobile swipe let touchStartX = 0; let touchEndX = 0; carousel.addEventListener('touchstart', (e) => { touchStartX = e.changedTouches[0].screenX; stopAutoRotate(); }, {passive: true}); carousel.addEventListener('touchend', (e) => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); startAutoRotate(); }, {passive: true}); function handleSwipe() { const swipeThreshold = 50; if (touchEndX touchStartX + swipeThreshold) { // Swipe right goToSlide(currentIndex - 1); } } });