script.js

const slidesEl = document.getElementById('slides');
const indicatorsEl = document.getElementById('indicators');
const captionEl = document.getElementById('caption');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');

const images = [
  { url: 'https://images.pexels.com/photos/417074/pexels-photo-417074.jpeg?auto=compress&cs=tinysrgb&w=800', caption: 'Mountain Landscape' },
  { url: 'https://images.pexels.com/photos/1108099/pexels-photo-1108099.jpeg?auto=compress&cs=tinysrgb&w=800', caption: 'Ocean Sunset' },
  { url: 'https://images.pexels.com/photos/1287145/pexels-photo-1287145.jpeg?auto=compress&cs=tinysrgb&w=800', caption: 'Forest Trail' },
  { url: 'https://images.pexels.com/photos/1287142/pexels-photo-1287142.jpeg?auto=compress&cs=tinysrgb&w=800', caption: 'Desert Dunes' },
  { url: 'https://images.pexels.com/photos/1366919/pexels-photo-1366919.jpeg?auto=compress&cs=tinysrgb&w=800', caption: 'City Skyline' },
];

let current = 0;
let autoPlayInterval = null;

function buildCarousel() {
  images.forEach((img, i) => {
    const slide = document.createElement('div');
    slide.className = 'slide';
    slide.style.backgroundImage = `url(${img.url})`;
    slidesEl.appendChild(slide);

    const dot = document.createElement('div');
    dot.className = 'indicator';
    dot.addEventListener('click', () => goTo(i));
    indicatorsEl.appendChild(dot);
  });
  update();
}

function update() {
  slidesEl.style.transform = `translateX(-${current * 100}%)`;
  document.querySelectorAll('.indicator').forEach((dot, i) => {
    dot.classList.toggle('active', i === current);
  });
  captionEl.textContent = images[current].caption;
}

function goTo(index) { current = (index + images.length) % images.length; update(); resetAutoPlay(); }
function next() { goTo(current + 1); }
function prev() { goTo(current - 1); }

function startAutoPlay() { autoPlayInterval = setInterval(next, 4000); }
function resetAutoPlay() { clearInterval(autoPlayInterval); startAutoPlay(); }

nextBtn.addEventListener('click', next);
prevBtn.addEventListener('click', prev);

document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowRight') next();
  if (e.key === 'ArrowLeft') prev();
});

const carousel = document.getElementById('carousel');
let touchStartX = 0;
carousel.addEventListener('touchstart', (e) => { touchStartX = e.touches[0].clientX; });
carousel.addEventListener('touchend', (e) => {
  const diff = touchStartX - e.changedTouches[0].clientX;
  if (Math.abs(diff) > 50) { diff > 0 ? next() : prev(); }
});

buildCarousel();
startAutoPlay();