商品ギャラリーのSwiper実装

{% liquid 
  assign block = section.blocks | where: 'type', 'media_gallery' | first

  assign current_variant = product.selected_or_first_available_variant

  if current_variant.featured_image
    assign initial_slide = product.selected_or_first_available_variant.featured_media.position | minus: 1
  else
    assign initial_slide = 0
  endif
%}

{% if product == nil %}
  {{ 'image' | placeholder_svg_tag: 'img-thumbnail' }}
{% elsif block != nil %}
  <product-media-gallery
    class="product-media-gallery"
    data-product-id="{{ product.id }}"
    data-initial-slide="{{ initial_slide }}"
    data-speed="{{ block.settings.speed }}"
    data-thumbs-per-view="{{ block.settings.thumbs_per_view }}">
    <div class="swiper-main-wrapper {{ block.settings.img_border }}">
      <div 
        class="swiper-main swiper"
        style="--swiper-theme-color: {{ block.settings.controls_color | prepend: 'var(--bs-' | append: '-rgb)' }}">
        <div class="swiper-wrapper">
          {% for media in product.media %}
            {% liquid 
              assign media_loading = 'eager' 
              if forloop.index > 2
                assign media_loading = 'lazy' 
              endif
            %}
            <div class="swiper-slide" lazy="{% if media_loading == 'lazy' %}true{% endif %}">
              {% case media.media_type %}
                {% when 'image' %}
                  {% render 'image-url', img: media, size: 800, orientation: block.settings.img_orientation, loading: media_loading, class: '' %}
                {% when 'video' %}
                  {{ media | video_tag: controls: true, image_size: '800x', loading: media_loading, class: 'bg-black w-100' }}
              {% endcase %}
            </div>
          {% endfor %}
        </div>
        <div class="swiper-controls">
          <div class="swiper-pagination"></div>
          <div class="swiper-scrollbar"></div>
          <div class="swiper-button-prev">
            {% render 'svg-icons', icon: 'chevron-left', size: 24 %}
          </div>
          <div class="swiper-button-next">
            {% render 'svg-icons', icon: 'chevron-right', size: 24 %}
          </div>
        </div>
      </div>
    </div>
    <div 
      class="swiper-thumbs swiper mt-4" 
      data-show-thumbs="{{ block.settings.show_thumbs }}"
      data-controls-color="{{ block.settings.controls_color }}"
      {% if product.media.size < 2 %}hidden{% endif %}>
      <div class="swiper-wrapper">
        {% for media in product.media %}
          <div class="swiper-slide" data-media-type="{{ media.media_type }}">
            {% case media.media_type %}
              {% when 'image' %}
                {% render 'image-url', img: media, size: 800, orientation: settings.product_img_orientation, class: 'img-thumbnail' %}
              {% when 'video' %}
                {% render 'svg-icons', icon: 'play', size: '18', aria-hidden: 'true' %}
                {% render 'image-url', img: media.preview_image, size: 800, orientation: settings.product_img_orientation, class: 'img-thumbnail' %}
            {% endcase %}
          </div>
        {% endfor %}
      </div>
    </div>
  </product-media-gallery>
{% endif %}