Review slider

<style>
  .review-slider-wrapper {
    width: 100%;
    max-width: 760px;
    margin: auto;
    overflow: hidden;
    position: relative;
    font-family: Arial, sans-serif;
  }

  .review-slider {
    display: flex;
    transition: transform 0.6s ease-in-out;
  }

  .review-card {
    min-width: 100%;
    box-sizing: border-box;
    /* background: #f8f8f8; */
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .review-img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }

  .review-content {
    flex: 1;
  }

  .review-text {
    font-size: 16px;
    color: #111;
    margin-bottom: 6px;
    line-height: 1.5;
  }

  .review-author {
    font-size: 14px;
    color: #666;
  }

  .stars {
    color: #f4b400;
    margin-left: 8px;
    font-size: 16px;
  }

  /* Mobile Responsive */
  @media (max-width: 768px) {
    .review-card {
      padding: 14px;
      gap: 12px;
    }

    .review-img {
      width: 48px;
      height: 48px;
    }

    .review-text {
      font-size: 15px;
    }

    .review-author {
      font-size: 14px;
    }

    .stars {
      font-size: 14px;
    }
  }

  @media (max-width: 480px) {
    .review-card {
      flex-direction: row;
      align-items: center;
      padding: 12px;
    }

    .review-img {
      width: 42px;
      height: 42px;
    }

    .review-text {
      font-size: 14px;
    }

    .review-author {
      font-size: 13px;
    }
  }
</style>

<div class="review-slider-wrapper">
  <div class="review-slider" id="reviewSlider">

    <div class="review-card">
      <img class="review-img" src="https://cdn.shopify.com/s/files/1/0661/1501/0654/files/image_1yt.png?v=1778668853"
        alt="">
      <div class="review-content">
        <div class="review-text">“Fast delivery and beautiful stitching. Will definitely order again.”</div>
        <div class="review-author">— Jay P., Mumbai <span class="stars">★★★★★</span></div>
      </div>
    </div>

    <div class="review-card">
      <img class="review-img" src="https://cdn.shopify.com/s/files/1/0661/1501/0654/files/image_2.png?v=1778668855"
        alt="">
      <div class="review-content">
        <div class="review-text">“Looks exactly like the pictures. Fabric feels gentle on kids’ skin.”
        </div>
        <div class="review-author">— Madhu Sharma, Hyderabad <span class="stars">★★★★★</span></div>
      </div>
    </div>

    <div class="review-card">
      <img class="review-img" src="https://cdn.shopify.com/s/files/1/0661/1501/0654/files/image_9.png?v=1778668854"
        alt="">
      <div class="review-content">
        <div class="review-text">Great quality and very comfortable for my child. Perfect for festive wear.
        </div>
        <div class="review-author">— Keval Patel, Jaipur <span class="stars">★★★★★</span></div>
      </div>
    </div>

    <div class="review-card">
      <img class="review-img" src="https://cdn.shopify.com/s/files/1/0661/1501/0654/files/image_5.png?v=1778668854"
        alt="">
      <div class="review-content">
        <div class="review-text">“Very good fitting and premium look at a reasonable price.”
        </div>
        <div class="review-author">— sanjay bhatt, Delhi <span class="stars">★★★★★</span></div>
      </div>
    </div>

    <div class="review-card">
      <img class="review-img" src="https://cdn.shopify.com/s/files/1/0661/1501/0654/files/image_7.png?v=1778668854"
        alt="">
      <div class="review-content">
        <div class="review-text">“Stylish designs and soft fabric. My daughter loved her outfit.”
        </div>
        <div class="review-author">— Ankita, Ahmedabad <span class="stars">★★★★★</span></div>
      </div>
    </div>

    <div class="review-card">
      <img class="review-img" src="https://cdn.shopify.com/s/files/1/0661/1501/0654/files/image_8.png?v=1778668854"
        alt="">
      <div class="review-content">
        <div class="review-text">Very nice 👍, the quality is good but pants is short as shown in the picture.</div>
        <div class="review-author">— hardik desai, Kolkata <span class="stars">★★★★★</span></div>
      </div>
    </div>

    <div class="review-card">
      <img class="review-img"
        src="https://cdn.shopify.com/s/files/1/0661/1501/0654/files/29976391-658d-4998-94fe-13fedc8e7a98_1.png?v=1778669902"
        alt="">
      <div class="review-content">
        <div class="review-text">This dress is really pretty 🤩 Tha quality of cloth is really soo good🤩 I am very
          Happy Thank you</div>
        <div class="review-author">— Nidhi C., Ahmedabad <span class="stars">★★★★★</span></div>
      </div>
    </div>

  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const slider = document.getElementById("reviewSlider");
    const slides = document.querySelectorAll(".review-card");
    let index = 0;

    function autoSlide() {
      index++;
      if (index >= slides.length) {
        index = 0;
      }
      slider.style.transform = `translateX(-${index * 100}%)`;
    }

    setInterval(autoSlide, 3000);
  });
</script>