auto slider

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">

<style>
  .custom-slider {
    width: 100%;
    overflow: hidden;
  }

  .custom-slider img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
  }

  .custom-slider a {
    display: block;
  }
</style>

<div class="swiper custom-slider">
  <div class="swiper-wrapper">

    <div class="swiper-slide">
      <a href="YOUR_LINK_1">
        <picture>
          <source media="(max-width:749px)"
            srcset="https://cdn.shopify.com/s/files/1/0748/4764/9988/files/hero_banner_mobile_1.png?v=1781087777">
          <img src="https://cdn.shopify.com/s/files/1/0748/4764/9988/files/hero_banner_1.png?v=1781086443" alt="">
        </picture>
      </a>
    </div>

    <div class="swiper-slide">
      <a href="YOUR_LINK_2">
        <picture>
          <source media="(max-width:749px)"
            srcset="https://cdn.shopify.com/s/files/1/0748/4764/9988/files/hero_banner_mobile_2.png?v=1781087780">
          <img src="https://cdn.shopify.com/s/files/1/0748/4764/9988/files/hero_banner_2.png?v=1781086442" alt="">
        </picture>
      </a>
    </div>

    <div class="swiper-slide">
      <a href="YOUR_LINK_3">
        <picture>
          <source media="(max-width:749px)"
            srcset="https://cdn.shopify.com/s/files/1/0748/4764/9988/files/hero_banner_mobile_3.png?v=1781087778">
          <img src="https://cdn.shopify.com/s/files/1/0748/4764/9988/files/hero_banner_3.png?v=1781086443" alt="">
        </picture>
      </a>
    </div>

  </div>

  <div class="swiper-pagination"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script>
  new Swiper('.custom-slider', {
    loop: true,
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    }
  });
</script>