Related Slider Product

<div class="color-{{ section.settings.color_scheme }} gradient">
  <product-recommendations
    class="related-products page-width section-{{ section.id }}-padding isolate{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
    data-url="{{ routes.product_recommendations_url }}?limit={{ section.settings.products_to_show }}"
    data-section-id="{{ section.id }}"
    data-product-id="{{ product.id }}"
  >
    {% if recommendations.performed and recommendations.products_count > 0 %}
      <div class="product-related-sl product-related-section arrow-black arrow-center-mobi">
        <div class="collection">
          <div class="collection__title title-wrapper title-wrapper--no-top-margin page-width">
            <div class="collection__description subtitle rte">  
              <h2 class="title inline-richtext h0">{{ section.settings.heading }}</h2>
              {% if section.settings.small_title != blank %}
                <p class="subtitle">{{ section.settings.small_title }}</p>
              {% endif %}
            </div>

            <!-- Swiper -->
            <slider-component class="product-related-swipper product-grid grid contains-card contains-card--product contains-card--standard">
              <div class="swiper-wrapper">
                {% assign skip_card_product_styles = false %}
                {% for recommendation in recommendations.products %}
                  <div class="swiper-slide grid__item">
                    {% render 'card-product',
                      card_product: recommendation,
                      media_aspect_ratio: section.settings.image_ratio,
                      image_shape: section.settings.image_shape,
                      show_secondary_image: section.settings.show_secondary_image,
                      show_vendor: section.settings.show_vendor,
                      show_rating: section.settings.show_rating,
                      skip_styles: skip_card_product_styles
                    %}
                  </div>
                  {% assign skip_card_product_styles = true %}
                {% endfor %}
              </div>

              <div class="swiper-pagination small-hide medium-hide"></div>
            </slider-component>

            <!-- Arrows -->
            <div class="arrow-slide-related button-swipper">
              <div class="swiper-button-prev">
                <span class="svg-wrapper">
                  {{ 'icon-left.svg' | inline_asset_content }}
                </span>
              </div>
              <div class="swiper-button-next">
                <span class="svg-wrapper">
                  {{ 'icon-right.svg' | inline_asset_content }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    {% endif %}
  </product-recommendations>

  {% if section.settings.image_shape == 'arch' %}
    {{ 'mask-arch.svg' | inline_asset_content }}
  {% endif %}
</div>

 <script>
  function initRelatedSwiper() {
    const el = document.querySelector('.product-related-sl .product-related-swipper');
    if (!el) return;

  
    if (el.classList.contains('swiper-initialized')) return;

    new Swiper(el, {
      slidesPerView: 2,
      spaceBetween: 0,
      loop: true,
      centeredSlides: false,
      pagination: {
        el: ".product-related-sl.product-related-section .swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: '.product-related-sl.product-related-section .arrow-slide-related .swiper-button-next',
        prevEl: '.product-related-sl.product-related-section .arrow-slide-related .swiper-button-prev',
      },
      autoplay: {
        delay: 500000,
        disableOnInteraction: false,
      },
      breakpoints: {
        0: {
          slidesPerView: "auto",
          spaceBetween: 0,
          slidesPerGroup: 2,
        },
        991: {
          slidesPerView: 4,
          spaceBetween: 0,
        },
      },
    });
  }
  document.addEventListener('product-recommendations:loaded', initRelatedSwiper);


  document.addEventListener('shopify:section:load', initRelatedSwiper);


  document.addEventListener('DOMContentLoaded', initRelatedSwiper);
</script>