slider discount

<style>
  .offer-carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 10px 0;
  }

  .offer-carousel {
    display: flex;
    transition: transform 0.6s ease-in-out;
    width: 100%;
  }

  .offer-slide {
    min-width: 100%;
    box-sizing: border-box;
    border: 1px dashed #f5c98d;
    border-radius: 10px;
    background: linear-gradient(90deg, #fff6eb, #ffffff);
    padding: 16px 24px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
  }

  .offer-title {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 4px;
  }

  .offer-desc {
    font-size: 14px;
    color: #333;
  }

  .offer-carousel::-webkit-scrollbar {
    display: none;
  }
</style>

<div class="offer-carousel-container">
  <div class="offer-carousel" id="offerCarousel">
    <div class="offer-slide">
      <div class="offer-title">SUTANEW200</div>
      <div class="offer-desc">Get ₹200 off on your first order over ₹2499</div>
    </div>
    <div class="offer-slide">
      <div class="offer-title">NORETURN</div>
      <div class="offer-desc">₹100 OFF | No Return & No exchange</div>
    </div>
    <div class="offer-slide">
      <div class="offer-title">SAVE500</div>
      <div class="offer-desc">Minimum purchase of ₹6999 | *no coupon code required</div>
    </div>
    <div class="offer-slide">
      <div class="offer-title">SAVE300</div>
      <div class="offer-desc">Minimum purchase of ₹4999 | *no coupon code required</div>
    </div>
  </div>
</div>

<script>
  const carousel = document.getElementById('offerCarousel');
  const totalSlides = carousel.children.length;
  let currentIndex = 0;

  setInterval(() => {
    currentIndex = (currentIndex + 1) % totalSlides;
    carousel.style.transform = `translateX(-${currentIndex * 100}%)`;
  }, 4000); // Slides every 4 seconds
</script>