review auto slider

<style>
    .testimonials-section {
        background: #fdf6f6;
        padding: 50px 20px;
        text-align: center;
    }

    .testimonials-section h2 {
        font-family: Montserrat, sans-serif;
        font-size: 26px;
        font-weight: 500;
        color: #9f785b;
        margin-bottom: 30px;
        letter-spacing: 1px;
        text-transform: capitalize;
    }

    .testimonials-slider {
        position: relative;
        max-width: 1200px;
        margin: 0 auto;
        overflow: hidden;
    }

    .testimonials-track {
        display: flex;
        transition: transform 0.6s ease-in-out;
    }

    .testimonial-item {
        min-width: 100%;
        box-sizing: border-box;
        padding: 15px;
    }

    .testimonial-card {
        background: #fff;
        border-radius: 10px;
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.1);
        padding: 20px;
        height: 100%;
    }

    .testimonial-card img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        border-radius: 10px;
    }

    .stars {
        color: #c96a6a;
        font-size: 18px;
        margin: 15px 0 10px;
    }

    .testimonial-text {
        font-size: 14px;
        line-height: 1.6;
        color: #333;
        font-family: "Nunito Sans", sans-serif;
    }

    .testimonial-author {
        margin-top: 10px;
        font-weight: 600;
        color: #444;
    }

    /* Responsive breakpoints */
    @media(min-width:768px) {
        .testimonial-item {
            min-width: 50%;
        }
    }

    @media(min-width:1024px) {
        .testimonial-item {
            min-width: 33.3333%;
        }
    }

    /* Dots */
    .slider-dots {
        text-align: center;
        margin-top: 15px;
    }

    .slider-dots span {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin: 0 5px;
        background: #bbb;
        border-radius: 50%;
        cursor: pointer;
    }

    .slider-dots .active {
        background: #c96a6a;
    }
</style>

<div class="testimonials-section">
    <h2>Testimonials</h2>

    <div class="testimonials-slider">
        <div class="testimonials-track">

            <!-- Testimonial 1 -->
            <div class="testimonial-item">
                <div class="testimonial-card">
                    <img src="https://cdn.shopify.com/s/files/1/0696/7164/9474/files/imgi_22_WhatsApp_Image_2025-01-23_at_2.36.20_PM_700x_ddd5d92e-7da3-4386-8cc9-02525d724a55.jpg?v=1757487232"
                        alt="Testimonial 1">
                    <div class="stars">★★★★★</div>
                    <div class="testimonial-text">
                        "I have ordered this beautiful suit set and I can vouch for quality and comfort..."
                    </div>
                    <div class="testimonial-author">~ Customer</div>
                </div>
            </div>

            <!-- Testimonial 2 -->
            <div class="testimonial-item">
                <div class="testimonial-card">
                    <img src="https://cdn.shopify.com/s/files/1/0696/7164/9474/files/imgi_25_Screenshot_2025-03-04_162123_700x_71856885-d369-45e0-a647-6843c0674b5f.jpg?v=1757487232"
                        alt="Testimonial 2">
                    <div class="stars">★★★★★</div>
                    <div class="testimonial-text">
                        "Such an amazingly rare fit. Love the fabric. Simply beautiful!"
                    </div>
                    <div class="testimonial-author">~ Customer</div>
                </div>
            </div>

            <!-- Testimonial 3 -->
            <div class="testimonial-item">
                <div class="testimonial-card">
                    <img src="https://cdn.shopify.com/s/files/1/0696/7164/9474/files/imgi_23_Screenshot_2025-03-04_163250_700x_f286227c-35d7-44e5-be97-2108bbf1f68c.jpg?v=1757487232"
                        alt="Testimonial 3">
                    <div class="stars">★★★★★</div>
                    <div class="testimonial-text">
                        "The fit, design, and material are top notch. Loved it!"
                    </div>
                    <div class="testimonial-author">~ Soumi Deb</div>
                </div>
            </div>

            <!-- Testimonial 4 -->
            <div class="testimonial-item">
                <div class="testimonial-card">
                    <img src="https://cdn.shopify.com/s/files/1/0696/7164/9474/files/imgi_24_Screenshot_2025-03-04_161444_700x_97a546f0-198a-4859-abfa-9286a1ab0e55.jpg?v=1757487231"
                        alt="Testimonial 4">
                    <div class="stars">★★★★★</div>
                    <div class="testimonial-text">
                        "Absolutely stunning outfit. Compliments everywhere!"
                    </div>
                    <div class="testimonial-author">~ Ananya</div>
                </div>
            </div>

            <!-- Testimonial 3 -->
            <div class="testimonial-item">
                <div class="testimonial-card">
                    <img src="https://cdn.shopify.com/s/files/1/0696/7164/9474/files/imgi_22_WhatsApp_Image_2025-01-23_at_2.36.20_PM_700x_ddd5d92e-7da3-4386-8cc9-02525d724a55.jpg?v=1757487232"
                        alt="Testimonial 3">
                    <div class="stars">★★★★★</div>
                    <div class="testimonial-text">
                        "The fit, design, and material are top notch. Loved it!"
                    </div>
                    <div class="testimonial-author">~ Soumi Deb</div>
                </div>
            </div>

            <!-- Testimonial 4 -->
            <div class="testimonial-item">
                <div class="testimonial-card">
                    <img src="https://cdn.shopify.com/s/files/1/0696/7164/9474/files/imgi_25_Screenshot_2025-03-04_162123_700x_71856885-d369-45e0-a647-6843c0674b5f.jpg?v=1757487232"
                        alt="Testimonial 4">
                    <div class="stars">★★★★★</div>
                    <div class="testimonial-text">
                        "Absolutely stunning outfit. Compliments everywhere!"
                    </div>
                    <div class="testimonial-author">~ Ananya</div>
                </div>
            </div>

        </div>
    </div>
    <div class="slider-dots"></div>
</div>

<script>
    const track = document.querySelector('.testimonials-track');
    const items = document.querySelectorAll('.testimonial-item');
    const dotsContainer = document.querySelector('.slider-dots');

    let index = 0;
    let itemsPerView = getItemsPerView();

    function getItemsPerView() {
        if (window.innerWidth >= 1024) return 3;
        if (window.innerWidth >= 768) return 2;
        return 1;
    }

    function updateSlider() {
        track.style.transform = `translateX(${-index * (100 / itemsPerView)}%)`;
        dots.forEach(dot => dot.classList.remove('active'));
        dots[Math.floor(index / itemsPerView)].classList.add('active');
    }

    // Create dots
    let totalPages = Math.ceil(items.length / itemsPerView);
    for (let i = 0; i < totalPages; i++) {
        const dot = document.createElement('span');
        dot.addEventListener('click', () => {
            index = i * itemsPerView;
            updateSlider();
        });
        dotsContainer.appendChild(dot);
    }
    let dots = dotsContainer.querySelectorAll('span');
    dots[0].classList.add('active');

    // Auto slide
    setInterval(() => {
        index += itemsPerView;
        if (index >= items.length) index = 0;
        updateSlider();
    }, 4000);

    // On resize
    window.addEventListener('resize', () => {
        itemsPerView = getItemsPerView();
        totalPages = Math.ceil(items.length / itemsPerView);
        dotsContainer.innerHTML = '';
        for (let i = 0; i < totalPages; i++) {
            const dot = document.createElement('span');
            dot.addEventListener('click', () => {
                index = i * itemsPerView;
                updateSlider();
            });
            dotsContainer.appendChild(dot);
        }
        dots = dotsContainer.querySelectorAll('span');
        dots[0].classList.add('active');
        index = 0;
        updateSlider();
    });
</script>