Menu Toggle
More
Close

SIR 2026






Image Carousel

body { font-family: Arial, sans-serif; background: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; }

.carousel-container { position: relative; width: 800px; height: 400px; overflow: hidden; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); }

.carousel { display: flex; transition: transform 0.5s ease-in-out; }

.carousel img { width: 800px; height: 400px; object-fit: cover; }

.btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: white; border: none; padding: 12px 18px; cursor: pointer; font-size: 20px; border-radius: 50%; }

.btn:hover { background: rgba(0,0,0,0.8); }

.prev { left: 15px; }

.next { right: 15px; }

.dots { position: absolute; bottom: 15px; width: 100%; text-align: center; }

.dot { display: inline-block; width: 12px; height: 12px; margin: 0 5px; background: rgba(255,255,255,0.6); border-radius: 50%; cursor: pointer; }

.dot.active { background: white; }


const carousel = document.getElementById('carousel'); const slides = document.querySelectorAll('.carousel img'); const dotsContainer = document.getElementById('dots');

let currentIndex = 0;

// Create dots slides.forEach((_, index) => { const dot = document.createElement('span'); dot.classList.add('dot'); if(index === 0) dot.classList.add('active');

dot.addEventListener('click', () => { currentIndex = index; updateCarousel(); });

dotsContainer.appendChild(dot); });

const dots = document.querySelectorAll('.dot');

function updateCarousel() { carousel.style.transform = `translateX(-${currentIndex * 800}px)`;

dots.forEach(dot => dot.classList.remove('active')); dots[currentIndex].classList.add('active'); }

function nextSlide() { currentIndex = (currentIndex + 1) % slides.length; updateCarousel(); }

function prevSlide() { currentIndex = (currentIndex - 1 + slides.length) % slides.length; updateCarousel(); }

// Auto slide every 3 seconds setInterval(nextSlide, 3000);