const slides = document.querySelector('.slides');
        const slide = document.querySelectorAll('.slide');
        let index = 0;
        
        // Function to move the slider
        const moveToSlide = (currentIndex) => {
            slides.style.transform = `translateX(-${currentIndex * 100}%)`;
        };
        
        // Auto-slide function
        const autoSlide = () => {
            index++;
            if (index >= slide.length) {
                index = 0; // Reset to the first slide
            }
            moveToSlide(index);
        };

// Interval for auto-slide
let slideInterval = setInterval(autoSlide, 5000); // 5000ms = 5 seconds

// Next and Previous buttons
document.getElementById('next-btn').addEventListener('click', () => {
    clearInterval(slideInterval); // Pause auto-slide on manual navigation
    index++;
    if (index >= slide.length) {
        index = 0;
    }
    moveToSlide(index);
    slideInterval = setInterval(autoSlide, 5000); // Restart auto-slide
});

document.getElementById('prev-btn').addEventListener('click', () => {
    clearInterval(slideInterval); // Pause auto-slide on manual navigation
    index--;
    if (index < 0) {
        index = slide.length - 1;
    }
    moveToSlide(index);
    slideInterval = setInterval(autoSlide, 5000); // Restart auto-slide
});