let index = 0;
const slides = document.querySelector('.slides');
const total = document.querySelectorAll('.slide').length;

document.querySelector('.next').addEventListener('click', () => {
  index = (index + 1) % total;
  slides.style.transform = `translateX(-${index * 100}%)`;
});

document.querySelector('.prev').addEventListener('click', () => {
  index = (index - 1 + total) % total;
  slides.style.transform = `translateX(-${index * 100}%)`;
});

// Auto play every 5 seconds
setInterval(() => {
  index = (index + 1) % total;
  slides.style.transform = `translateX(-${index * 100}%)`;
}, 5000);
