document.querySelectorAll('.mini-slider').forEach(slider => {
  const slides = slider.querySelectorAll('.mini-slide');
  const prevBtn = slider.querySelector('.mini-prev');
  const nextBtn = slider.querySelector('.mini-next');
  let currentIndex = 0;

  function showSlide(index) {
    slides.forEach((slide, i) => {
      slide.classList.toggle('active', i === index);
    });
  }

  prevBtn.addEventListener('click', () => {
    currentIndex = (currentIndex - 1 + slides.length) % slides.length;
    showSlide(currentIndex);
  });

  nextBtn.addEventListener('click', () => {
    currentIndex = (currentIndex + 1) % slides.length;
    showSlide(currentIndex);
  });

  // Show first slide initially
  showSlide(currentIndex);
});