java - Featured collection shopify with Swiper JS

<!-- Initialize Swiper -->
<script>
    window.addEventListener('load', function() {
      const swiper = new Swiper(".mySwiper", { // Optional parameters
          direction: "horizontal",
          slidesPerView: 1,
          loop: true,
          lazyLoading: true,
          keyboard: {
            enabled: true
          },

          // If we need pagination
          pagination: {
              el: ".swiper-pagination"
          },

          // Navigation arrows
          navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev"
          },
      });
  });
</script>Copy code

<div class="flex flex-col items-center px-0 lg:px-8">
  {% if section.settings.title != blank %}
    <h2
      class="{{ section.settings.align_text }} font-bold uppercase mt-20 mb-10"
      style="font-size: {{ section.settings.font_size }}px"
    >
      {{ section.settings.title | escape }}
    </h2>
  {% endif %}

  <div class="max-w-full mx-auto">
    {% if section.settings.slider_enabled %}
      <!-- Swiper -->
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide flex w-full">
            {%- for product in section.settings.featured_collection.products limit: section.settings.number_of_products_to_show -%}
              <div class="
                  {{ section.settings.items_per_row_mobile }}
                  {{ section.settings.items_per_row_tablet }}
                  {{ section.settings.items_per_row }} shrink-0 px-1 md:px-3
                ">
                {%
                  render 'product-card',
                  product: product,
                  show_secondary_image: section.settings.show_secondary_image
                %}
              </div>
            {%- endfor -%}
          </div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>
      </div>
    {% endif %}
  </div>
</div>Copy code