<!-- =========================
     SLIDER START
========================= -->

<div id="simpleSlider" class="relative w-full overflow-hidden">

    <!-- Slides Wrapper -->
    <div class="slides flex transition-transform duration-500">

        <!-- Slide 1 -->
        <div class="slide min-w-full">
            <img src="/assets/img/sliders/hero_1.jpg" class="w-full block" alt="Luxury Furniture">
        </div>

        <!-- Slide 2 -->
        <div class="slide min-w-full">
            <img src="/assets/img/sliders/hero_2.jpg" class="w-full block" alt="Modern Sofa">
        </div>

        <!-- Slide 3 -->
        <div class="slide min-w-full">
            <img src="/assets/img/sliders/hero_3.jpg" class="w-full block" alt="Premium Living Room">
        </div>

        <!-- Slide 4 -->
        <div class="slide min-w-full">
            <img src="/assets/img/sliders/hero_4.jpg" class="w-full block" alt="Luxury Bedroom">
        </div>

        <!-- Slide 5 -->
        <div class="slide min-w-full">
            <img src="/assets/img/sliders/hero_5.jpg" class="w-full block" alt="Elegant Interior">
        </div>

        <!-- Slide 6 -->
        <div class="slide min-w-full">
            <img src="/assets/img/sliders/hero_6.jpg" class="w-full block" alt="Modern Furniture">
        </div>

    </div>

    <!-- LEFT BUTTON -->
    <button onclick="changeSlide(-1)"
        class="absolute left-5 top-1/2 -translate-y-1/2 bg-black/40 text-white w-12 h-12 rounded-full z-50 hover:bg-[#D4A85A] transition">

        ‹

    </button>

    <!-- RIGHT BUTTON -->
    <button onclick="changeSlide(1)"
        class="absolute right-5 top-1/2 -translate-y-1/2 bg-black/40 text-white w-12 h-12 rounded-full z-50 hover:bg-[#D4A85A] transition">

        ›

    </button>

</div>

<!-- =========================
     SLIDER SCRIPT
========================= -->

<script>

let currentIndex = 0;

const slides = document.querySelectorAll('#simpleSlider .slide');

function showSlide(index){

    if(index >= slides.length){
        currentIndex = 0;
    }

    if(index < 0){
        currentIndex = slides.length - 1;
    }

    document.querySelector('#simpleSlider .slides').style.transform =
    `translateX(-${currentIndex * 100}%)`;

}

function changeSlide(step){

    currentIndex += step;

    showSlide(currentIndex);

}

/* AUTO SLIDE */

setInterval(() => {

    currentIndex++;

    showSlide(currentIndex);

}, 5000);

</script>

<!-- =========================
     SLIDER END
========================= -->