product-carousel.liquid

{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-product-grid.css' | asset_url | stylesheet_tag }}
{{ 'section-product-carousel.css' | asset_url | stylesheet_tag }}

<script src="{{ 'swatchHelper.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'product-carousel.js' | asset_url }}" defer="defer"></script>

<div class='container my-12'>

  {% unless section.settings.heading == blank %}
    <h2 class="mb-15p">{{ section.settings.heading | escape }}</h2>
  {% endunless %}

  {% unless section.settings.subtitle == blank %}
    <p class="p2 mb-25p text-180 leading-216">{{ section.settings.subtitle }}</p>
  {% endunless %}

  <product-carousel>
    <div class="product-carousel carousel-for--{{ section.blocks.size }}">
      <div class="swiper-container" 
        data-slideshow data-autoplay 
        data-speed="3000" 
        data-transition-speed="1000" 
        data-custom-left="carousel__controls--left" 
        data-custom-right="carousel__controls--right">
        
        <div class="swiper-wrapper">
          {%- for block in section.blocks -%}
            {% assign p = block.settings.product %}
            <div class="slideshow-slide-{{ block.id }} slideshow-slide swiper-slide" data-slideshow-slide>
              {% render 'product-card',
                product_card_product: p,
                media_size: 'portrait',
                show_secondary_image: false,
                add_image_padding: false,
                show_image_outline: false,
                show_swatches: true,
                show_features: true
              %}
            </div>
          {%- endfor -%}
        </div>

        {% unless section.blocks.size <= 1 %}
          <div class="flex items-center justify-end carousel__controls carousel__controls--content">
            <span class="carousel__controls--left">
              {% render 'icon-caret-left' %}
            </span>

            <span class="ml-10 carousel__controls--right">
              {% render 'icon-caret-right' %}
            </span>
          </div>
        {% endunless %}

      
      </div>
    </div>
  </product-carousel>
</div>

{% schema %}
{
  "name": "t:sections.product-carousel.name",
  "max_blocks": 15,
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "label": "t:sections.product-carousel.settings.heading.label"
    },
    {
      "type": "text",
      "id": "subtitle",
      "label": "t:sections.product-carousel.settings.subtitle.label"
    }
  ],
  "blocks": [
    {
      "type": "product",
      "name": "t:sections.product-carousel.blocks.product.name",
      "settings": [
        {
          "type": "product",
          "id": "product",
          "label": "t:sections.product-carousel.blocks.product.name"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.product-carousel.presets.name"
    }
  ]
}
{% endschema %}