class SimpleCarousel { constructor() { this.currentSlide = 0; this.totalSlides = 15; this.slidesContainer = document.getElementById('carouselSlides'); this.dots = document.querySelectorAll('.carousel-dot'); this.prevBtn = document.getElementById('prevBtn'); this.nextBtn = document.getElementById('nextBtn'); this.captionElement = document.getElementById('carouselCaption'); // Define captions for each slide this.captions = [ "University Gate", "Pandit Iswar Chandra Vidyasagar", "Vidyasagar Bhawan [Administrative Building(Old)]", "Aerial View of University towards Gate 1", "Aerial View of University towards Gate 3", "Anil Gayan Bhavan (Central Library)", "Rabindra Nazrul Bhavan (Humaninities & Social Sc. Block)", "Binoy Badal Dinesh Bhawan [DDE Building Old)]", "Sido Kanhu Birsha Chhatrabas (P.G. Boys Hostel - II)", "Centre for the study of Adivasi Society", "Rangamati Guest House", "Aranyak Guest Hose", "Night View of Anil Gayan Bhavan (Central Library)", "Aerial View of University Campus", "Vidyasagar Bhawan [New Administrative Building(Annex)]" ]; this.init(); } init() { // Add event listeners this.prevBtn.addEventListener('click', () => this.prevSlide()); this.nextBtn.addEventListener('click', () => this.nextSlide()); // Add hover effects for buttons this.prevBtn.addEventListener('mouseenter', () => { this.prevBtn.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; }); this.prevBtn.addEventListener('mouseleave', () => { this.prevBtn.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; }); this.nextBtn.addEventListener('mouseenter', () => { this.nextBtn.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; }); this.nextBtn.addEventListener('mouseleave', () => { this.nextBtn.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; }); // Add click listeners to dots this.dots.forEach((dot, index) => { dot.addEventListener('click', () => this.goToSlide(index)); // Add hover effect for dots dot.addEventListener('mouseenter', () => { if (index !== this.currentSlide) { dot.style.backgroundColor = 'rgba(255, 255, 255, 0.8)'; } }); dot.addEventListener('mouseleave', () => { if (index !== this.currentSlide) { dot.style.backgroundColor = 'rgba(255, 255, 255, 0.5)'; } }); }); // Auto-play carousel this.startAutoPlay(); // Pause on hover const carouselContainer = document.querySelector('.carousel-container'); carouselContainer.addEventListener('mouseenter', () => this.stopAutoPlay()); carouselContainer.addEventListener('mouseleave', () => this.startAutoPlay()); } updateSlide() { const translateX = -this.currentSlide * (100 / this.totalSlides); this.slidesContainer.style.transform = `translateX(${translateX}%)`; // Update active class for zoom effect const slides = document.querySelectorAll('.carousel-slide'); slides.forEach((slide, index) => { if (index === this.currentSlide) { slide.classList.add('active'); } else { slide.classList.remove('active'); } }); // Update dots this.dots.forEach((dot, index) => { if (index === this.currentSlide) { dot.style.backgroundColor = 'white'; } else { dot.style.backgroundColor = 'rgba(255, 255, 255, 0.5)'; } }); // Update caption text this.captionElement.textContent = this.captions[this.currentSlide]; } nextSlide() { this.currentSlide = (this.currentSlide + 1) % this.totalSlides; this.updateSlide(); } prevSlide() { this.currentSlide = (this.currentSlide - 1 + this.totalSlides) % this.totalSlides; this.updateSlide(); } goToSlide(slideIndex) { this.currentSlide = slideIndex; this.updateSlide(); } startAutoPlay() { this.autoPlayInterval = setInterval(() => { this.nextSlide(); }, 4000); } stopAutoPlay() { if (this.autoPlayInterval) { clearInterval(this.autoPlayInterval); } } } // Initialize carousel when page loads document.addEventListener('DOMContentLoaded', () => { new SimpleCarousel(); }); .carousel-slide.active img { animation: kenBurns 8s ease-in-out infinite alternate; } @keyframes kenBurns { 0% { transform: scale(1); } 100% { transform: scale(1.15); } }