offers

<style>
  .available-offers-wrapper {
    font-family: Arial, sans-serif;
    width: 100%;
  }

  .available-title {
    display: flex;
    align-items: center;
    /* gap: 8px; */
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 12px;
    color: #474a57;
    letter-spacing: 0.5px;
  }

  .available-title img {
    width: 20px;
    height: 20px;
  }

  .offer-container {
    position: relative;
    background: #aa5be375;
    border-radius: 15px;
    overflow: hidden;
  }

  .offer-track {
    display: flex;
    transition: transform 0.2s ease;
  }

  .offer-slide {
    min-width: 100%;
    padding: 10px 25px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .offer-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .offer-icon {
    width: 60px;
    height: 60px;
  }

  .offer-text h3 {
    margin: 0;
    font-size: 18px;
    color: #000000;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.3px;
  }

  .offer-text p {
    margin: 2px 0 0;
    font-size: 16px;
    color: #000;
    line-height: 1.2;
    font-family: unset;
    font-weight: 400;
  }

  .offer-counter {
    /* font-weight: 600; */
    font-size: 14px;
    font-weight: 500;
    color: #000;
  }

  /* .offer-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 0px;
    color: #8b3dff;
    cursor: pointer;
    z-index: 2;
    width: 12px;
    height: 12px;
    border-left: 1px solid #8C30F5 !important;
    border-bottom: 1px solid #8C30F5 !important;
    transform: rotate(45deg) translateY(-50%);
    margin-top: -3px;
    padding: 0;
  } */

  .offer-arrow.left {
    left: 8px;
    position: absolute;
    top: 50%;
    /* transform: translateY(-50%); */
    background: none;
    border: none;
    font-size: 0px;
    color: #8b3dff;
    cursor: pointer;
    z-index: 2;
    width: 12px;
    height: 12px;
    border-left: 1px solid #8C30F5 !important;
    border-bottom: 1px solid #8C30F5 !important;
    transform: rotate(45deg) translateY(-50%);
    margin-top: -3px;
    padding: 0;
  }

  .offer-arrow.right {
    /* right: 8px; */
    position: absolute;
    font-size: 0;
    top: 50%;
    right: 12px;
    width: 12px;
    height: 12px;
    border-top: 1px solid #8C30F5 !important;
    border-right: 1px solid #8C30F5 !important;
    transform: rotate(45deg) translateY(-50%);
    margin-top: -3px;
    border-radius: 0;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .available-title svg {
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    margin-right: 5px;
  }

  /* Responsive */
  @media(max-width:768px) {
    .offer-slide {
      padding: 15px 20px;
    }

    .offer-text h3 {
      font-size: 14px;
    }

    .offer-text p {
      font-size: 12px;
    }

    .offer-icon {
      width: 38px;
      height: 38px;
    }

    .offer-arrow.left {
      left: 8px;
      position: absolute;
      top: 50%;
      /* transform: translateY(-50%); */
      background: none;
      border: none;
      font-size: 0px;
      color: #8b3dff;
      cursor: pointer;
      z-index: 2;
      width: 9px;
      height: 9px;
      border-left: 1px solid #8C30F5 !important;
      border-bottom: 1px solid #8C30F5 !important;
      transform: rotate(45deg) translateY(-50%);
      margin-top: -3px;
      padding: 0;
    }

    .offer-arrow.right {
      /* right: 8px; */
      position: absolute;
      font-size: 0;
      top: 50%;
      right: 12px;
      width: 9px;
      height: 9px;
      border-top: 1px solid #8C30F5 !important;
      border-right: 1px solid #8C30F5 !important;
      transform: rotate(45deg) translateY(-50%);
      margin-top: -3px;
      border-radius: 0;
      background: transparent;
      border: none;
      padding: 0;
      cursor: pointer;
    }
  }
</style>

<div class="available-offers-wrapper">

  <div class="available-title">
    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="27" viewBox="0 0 28 27" fill="none">
      <g clip-path="url(#clip0_786_7939)">

        <g clip-path="url(#clip1_786_7939)">
          <path
            d="M16.0003 24.7541C22.6279 24.7541 28.0006 19.3813 28.0006 12.7537C28.0006 6.12614 22.6279 0.753418 16.0003 0.753418C9.37273 0.753418 4 6.12614 4 12.7537C4 19.3813 9.37273 24.7541 16.0003 24.7541Z"
            fill="#FEDD4F"></path>
          <path
            d="M16.4588 24.7446C16.3066 24.7503 16.1538 24.7534 16.0003 24.7534C9.37258 24.7534 4 19.3808 4 12.7531C4 6.12537 9.37258 0.753418 16.0003 0.753418C16.1538 0.753418 16.3066 0.75655 16.4588 0.762186C10.044 1.00269 4.91693 6.27945 4.91693 12.7531C4.91693 19.2268 10.044 24.5041 16.4588 24.7446Z"
            fill="#F0CE18"></path>
          <path
            d="M23.2891 3.21924L7.92045 21.6268C7.44319 21.1921 7.00038 20.7199 6.59766 20.2138L21.6638 2.16827C22.235 2.47517 22.7787 2.82716 23.2891 3.21924Z"
            fill="#FEE893"></path>
          <path
            d="M26.5108 6.96841L12.1837 24.129C11.1973 23.7995 10.2684 23.3454 9.41602 22.7855L24.6951 4.48505C25.4016 5.22912 26.0129 6.06338 26.5108 6.96841Z"
            fill="#FEE893"></path>
          <path
            d="M16.047 21.8836C21.1152 21.8836 25.2238 17.775 25.2238 12.7068C25.2238 7.63853 21.1152 3.52991 16.047 3.52991C10.9787 3.52991 6.87012 7.63853 6.87012 12.7068C6.87012 17.775 10.9787 21.8836 16.047 21.8836Z"
            fill="#FEBD11"></path>
          <path
            d="M25.2231 12.7068C25.2231 17.775 21.1144 21.8836 16.0462 21.8836C13.9681 21.8836 12.0509 21.1928 10.5127 20.0278L22.017 5.73831C23.9799 7.42124 25.2231 9.91901 25.2231 12.7068Z"
            fill="#F6A31D"></path>
          <path
            d="M25.2232 12.7068C25.2232 17.775 21.1145 21.8836 16.0463 21.8836C15.8171 21.8836 15.5891 21.8755 15.3643 21.8586C20.1137 21.5091 23.8584 17.5451 23.8584 12.7068C23.8584 7.86843 20.1137 3.90445 15.3643 3.55496C15.5891 3.53805 15.8171 3.52991 16.0463 3.52991C21.1145 3.52991 25.2232 7.63857 25.2232 12.7068Z"
            fill="#F38E20"></path>
          <path
            d="M9.57869 11.1842C9.38829 10.8741 9.38015 10.5472 9.55552 10.2297C9.75406 9.87015 10.0735 9.69666 10.4806 9.69666C10.8877 9.69666 11.2929 9.69666 11.6994 9.69728C11.303 9.70355 10.9923 9.87704 10.7975 10.2297C10.6221 10.5472 10.6309 10.8741 10.8207 11.1842C11.0161 11.503 11.3042 11.6595 11.665 11.6777C11.2773 11.6783 10.889 11.679 10.5013 11.6796C10.1029 11.6808 9.78726 11.5255 9.57869 11.1842Z"
            fill="#F38E20"></path>
          <path
            d="M16.344 20.0955C16.0277 20.3303 15.573 20.3861 15.2185 20.1756C14.9498 20.0165 14.7744 19.7441 14.5608 19.5205C13.5988 18.5102 12.6543 17.4824 11.7011 16.4634C11.0503 15.7676 10.3933 15.078 9.74317 14.3822C9.19076 13.7909 9.42813 12.9247 10.1998 12.7199C10.3031 12.693 10.4158 12.693 10.5242 12.693C10.8912 12.693 11.2582 12.6936 11.6259 12.6948C11.5633 12.698 11.5006 12.7042 11.4418 12.7199C10.6708 12.9247 10.4328 13.7909 10.9852 14.3822C11.6359 15.078 12.2923 15.7676 12.943 16.4634C13.8963 17.4824 14.8408 18.5102 15.8035 19.5205C15.9838 19.7103 16.1379 19.9345 16.344 20.0955Z"
            fill="#F38E20"></path>
          <path
            d="M11.7522 6.70975C11.4967 6.71037 11.228 6.77301 11.0207 6.95965C10.7125 7.23711 10.5973 7.66864 10.7326 8.02439C10.891 8.43965 11.238 8.68203 11.6858 8.68203C11.6858 8.68203 11.1384 8.68266 10.4438 8.68203C9.99601 8.68203 9.6484 8.43965 9.49056 8.02439C9.35528 7.66864 9.47052 7.23711 9.77805 6.95965C9.98599 6.77301 10.2547 6.71037 10.5102 6.70975"
            fill="#F38E20"></path>
          <path
            d="M17.083 11.8318C16.7134 12.3635 16.0896 12.6836 15.4451 12.6917C14.7662 12.6999 14.2031 12.6917 14.2031 12.6917C14.8476 12.6836 15.4714 12.3635 15.841 11.8318C15.9293 11.7053 15.8622 11.679 15.7733 11.6746C16.156 11.674 16.5381 11.6733 16.9207 11.6733C17.0397 11.6733 17.2013 11.6614 17.083 11.8318Z"
            fill="#F38E20"></path>
          <path
            d="M15.2243 8.67514C15.9941 8.67514 16.5064 8.97515 17.0375 9.50376C17.0644 9.5307 17.0926 9.55888 17.1058 9.59521C17.1189 9.63091 17.1133 9.67725 17.082 9.69918C17.0576 9.71609 17.0256 9.71546 16.9962 9.71358C16.616 9.69229 16.2339 9.68665 15.8513 9.6879C15.8726 9.66473 15.8751 9.6259 15.8638 9.59521C15.8506 9.55888 15.8225 9.5307 15.7955 9.50376C15.3107 9.0215 14.8416 8.729 14.1777 8.68266C14.5266 8.6814 14.8755 8.6789 15.2243 8.67514Z"
            fill="#F38E20"></path>
          <path
            d="M13.9824 14.6684C14.1622 14.8732 14.2993 15.0404 14.4471 15.1976C15.0096 15.7939 15.5808 16.3814 16.1376 16.9833C16.6449 17.5313 17.1535 18.0787 17.6733 18.6149C17.9971 18.9487 18.1024 19.5362 17.7666 19.9376C17.4641 20.2984 16.8961 20.428 16.472 20.1763C16.2034 20.0172 16.0274 19.7447 15.8144 19.5211C14.8518 18.5109 13.9079 17.4831 12.9546 16.4641C12.3039 15.7682 11.6469 15.0786 10.9967 14.3828C10.4443 13.7916 10.6823 12.926 11.4533 12.7212C11.5567 12.6936 11.6694 12.6942 11.7778 12.6942C13.0041 12.6942 14.2304 12.7074 15.4568 12.6924C16.1013 12.6848 16.7251 12.3642 17.0946 11.8324C17.213 11.6621 17.0514 11.674 16.9324 11.674C15.2062 11.6752 13.4801 11.6771 11.754 11.6808C11.3563 11.6815 11.0406 11.5268 10.8314 11.1854C10.6416 10.8754 10.6329 10.5485 10.8082 10.2309C11.0068 9.87203 11.3262 9.69792 11.7333 9.69792C12.6214 9.69792 13.5095 9.69917 14.3977 9.70042C15.2651 9.70168 16.1413 9.6666 17.0075 9.71545C17.037 9.71733 17.0689 9.71796 17.0927 9.70105C17.124 9.67913 17.1303 9.63278 17.1172 9.59645C17.104 9.56013 17.0758 9.53194 17.0489 9.50501C16.5178 8.97639 16.0054 8.67639 15.2357 8.67639C14.0563 8.68954 12.877 8.6839 11.6976 8.6839C11.2498 8.6839 10.9028 8.44152 10.7443 8.02627C10.6091 7.67052 10.7243 7.23961 11.0324 6.96152C11.2398 6.77488 11.5084 6.71224 11.764 6.71099C14.7948 6.69972 17.8249 6.69095 20.8557 6.70974C21.75 6.71538 22.0469 7.48638 21.8446 8.04756C21.7056 8.43212 21.348 8.67701 20.9189 8.68077C20.3177 8.68641 19.7164 8.68766 19.1139 8.68202C18.9717 8.68077 18.9172 8.70896 18.9748 8.8505C19.1038 9.16742 19.1671 9.70168 19.5742 9.70606C20.0797 9.7117 20.5876 9.65533 21.0918 9.74239C21.5471 9.8213 21.8659 10.1551 21.906 10.6067C21.9448 11.0445 21.673 11.4629 21.2534 11.6113C21.1193 11.6589 20.9828 11.679 20.84 11.6783C20.3872 11.6746 19.9337 11.6815 19.4809 11.674C19.3306 11.6715 19.273 11.7241 19.2247 11.8719C18.8853 12.9109 18.2445 13.6901 17.26 14.203C16.5942 14.55 15.899 14.6734 15.1655 14.6697C14.791 14.6678 14.4171 14.6697 13.983 14.6697L13.9824 14.6684Z"
            fill="#FEDD4F"></path>
        </g>
      </g>
      <defs>
        <clipPath id="clip0_786_7939">
          <rect width="28" height="26" fill="white" transform="translate(0 0.753418)"></rect>
        </clipPath>

      </defs>
    </svg>
    Available offers
  </div>

  <div class="offer-container">
    <button class="offer-arrow left">❮</button>
    <button class="offer-arrow right">❯</button>

    <div class="offer-track">

      <div class="offer-slide">
        <div class="offer-left">
          <img class="offer-icon"
            src="https://cdn.shopify.com/s/files/1/0765/0174/5863/files/free_delivery_icon_40ecd415-f712-42ff-9d53-908cd2cbbfb5.avif?v=1771818220">
          <div class="offer-text">
            <h3>Get free shipping</h3>
            <p>Auto-applied at checkout.</p>
          </div>
        </div>
        <div class="offer-counter"></div>
      </div>

      <div class="offer-slide">
        <div class="offer-left">
          <img class="offer-icon"
            src="https://cdn.shopify.com/s/files/1/0765/0174/5863/files/free_delivery_icon_40ecd415-f712-42ff-9d53-908cd2cbbfb5.avif?v=1771818220">
          <div class="offer-text">
            <h3>Extra 10% OFF</h3>
            <p>Use code SAVE10</p>
          </div>
        </div>
        <div class="offer-counter"></div>
      </div>

      <div class="offer-slide">
        <div class="offer-left">
          <img class="offer-icon"
            src="https://cdn.shopify.com/s/files/1/0765/0174/5863/files/icon_1e044234-7684-4237-866b-dc649f7bd04c.avif?v=1771818220">
          <div class="offer-text">
            <h3>Buy 2 Get 1 Free</h3>
            <p>Limited time only</p>
          </div>
        </div>
        <div class="offer-counter"></div>
      </div>

      <div class="offer-slide">
        <div class="offer-left">
          <img class="offer-icon"
            src="https://cdn.shopify.com/s/files/1/0765/0174/5863/files/icon_1e044234-7684-4237-866b-dc649f7bd04c.avif?v=1771818220">
          <div class="offer-text">
            <h3>Cashback Available</h3>
            <p>On selected cards</p>
          </div>
        </div>
        <div class="offer-counter"></div>
      </div>

    </div>
  </div>

</div>

<script>
  const track = document.querySelector(".offer-track");
  const slides = document.querySelectorAll(".offer-slide");
  const prevBtn = document.querySelector(".offer-arrow.left");
  const nextBtn = document.querySelector(".offer-arrow.right");

  let index = 0;
  const total = slides.length;

  function updateSlider() {
    track.style.transform = `translateX(-${index * 100}%)`;
    slides.forEach((slide, i) => {
      slide.querySelector(".offer-counter").innerText = `${index + 1}/${total}`;
    });
  }

  nextBtn.onclick = () => {
    index = (index + 1) % total;
    updateSlider();
  };

  prevBtn.onclick = () => {
    index = (index - 1 + total) % total;
    updateSlider();
  };

  setInterval(() => {
    index = (index + 1) % total;
    updateSlider();
  }, 3000);

  updateSlider();
</script>