specific-device-slideshow.liquid

{%- if section.settings.slideshow_height == 'adapt' -%}
  {% comment %}
    'min_aspect_ratio' is the minimum aspect ratio of images shown without
    whitespace when 'slideshow_height' is set to 'adapt'.
    The aspect ratio values for the first image in the slideshow will be used
    unless it is blank, in that case a ratio of 2:1 will be used.
  {% endcomment %}

  {%- assign first_block = section.blocks[0] -%}
  {%- if first_block.settings.image.aspect_ratio == blank -%}
    {%- assign min_aspect_ratio = 2.0 -%}
  {%- else -%}
    {%- assign min_aspect_ratio = first_block.settings.image.aspect_ratio -%}
  {%- endif -%}
  
  {%- if first_block.settings.image_small.aspect_ratio == blank -%}
    {%- assign min_aspect_ratio = 2.0 -%}
  {%- else -%}
    {%- assign min_aspect_ratio = first_block.settings.image_small.aspect_ratio -%}
  {%- endif -%}
  {% assign wrapper_height = 100 | divided_by: min_aspect_ratio %}
{%- endif -%}

{%- assign text_alignments = section.settings.text_alignment | split: ' ' -%}
{%- assign text_horizontal_alignment = text_alignments.first -%}
{%- assign text_vertical_alignment = text_alignments.last | strip -%}

<div class="multi-slideshow-wrapper" >


<div data-section-id="{{ section.id }}" data-section-type="slideshow-section">
  {%- if section.blocks.size > 0 -%}
    <div id="SlideshowWrapper-{{ section.id }}" class="slideshow-wrapper" role="region" aria-label="slideshow" aria-describedby="slideshow-info" tabindex="-1">
      <div class="slideshow slideshow--{{ section.settings.slideshow_height }}{% if display_controls %} slideshow--display-controls{% endif %}"
           id="Slideshow-{{ section.id }}"
           data-autorotate="{{ section.settings.autorotate }}"
           data-speed="{{ section.settings.autorotate_speed | times: 1000 }}"
           data-adapt-height="{% if section.settings.slideshow_height == 'adapt' %}true{% else %}false{% endif %}"
           data-slide-nav-a11y="{{ 'sections.slideshow.load_slide' | t: slide_number: '[slide_number]' }}"
           {% if section.settings.slideshow_height == 'adapt' %}data-min-aspect-ratio="{{ min_aspect_ratio }}"
           style="height: {{- wrapper_height -}}vw"{% endif %}>

        {%- for block in section.blocks -%}
          <div class="slideshow__slide slideshow__slide--{{ block.id }}" {{ block.shopify_attributes }}>
            <div class="desktop-image">
              {% if block.settings.image == blank %}
                <div class="slideshow__image js">
                  <div class="placeholder-background">
                    {% capture current %}{% cycle 1, 2 %}{% endcapture %}
                    {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                  </div>
                  {% if section.settings.show_overlay %}<div class="slideshow__overlay"></div>{% endif %}
                </div>
              {% else %}
                <div class="slideshow__image box ratio-container lazyload{% unless forloop.first %} lazypreload{% endunless %} js"
                    data-bgset="{% include 'bgset', image: block.settings.image %}"
                    data-sizes="auto"
                    data-parent-fit="contain"
                    style="background-position: {{ block.settings.alignment }};
                            background-image: url('{{ block.settings.image | img_url: '300x300' }}');">
                  {% if section.settings.show_overlay %}<div class="slideshow__overlay"></div>{% endif %}
                </div>
              {% endif %}
            </div>
            <div class="mobile-image">
              {% if block.settings.image_small == blank %}
                <div class="slideshow__image js">
                  <div class="placeholder-background">
                    {% capture current %}{% cycle 1, 2 %}{% endcapture %}
                    {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                  </div>
                  {% if section.settings.show_overlay %}<div class="slideshow__overlay"></div>{% endif %}
                </div>
              {% else %}
                <div class="slideshow__image box ratio-container lazyload{% unless forloop.first %} lazypreload{% endunless %} js"
                    data-bgset="{% include 'bgset', image: block.settings.image_small %}"
                    data-sizes="auto"
                    data-parent-fit="contain"
                    style="background-position: {{ block.settings.alignment }};
                            background-image: url('{{ block.settings.image_small | img_url: '300x300' }}');">
                  {% if section.settings.show_overlay %}<div class="slideshow__overlay"></div>{% endif %}
                </div>
              {% endif %}
            </div>
            <noscript>
              <div class="desktop-image">
                <div class="slideshow__image"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}'); background-position: {{ block.settings.alignment }};"{% endif %}>
                  {% if block.settings.image == blank %}
                    <div class="placeholder-background">
                      {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
                    </div>
                  {% endif %}
                </div>
              </div>
              <div class="mobile-image">
                <div class="slideshow__image"{% if block.settings.image %} style="background-image: url('{{ block.settings.image_small | img_url: '2048x' }}'); background-position: {{ block.settings.alignment }};"{% endif %}>
                  {% if block.settings.image_small == blank %}
                    <div class="placeholder-background">
                      {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
                    </div>
                  {% endif %}
                </div>
              </div>
            </noscript>

            <div class="slideshow__text-wrap slideshow__text-wrap--desktop">
              <div class="slideshow__text-content slideshow__text-content--vertical-{{ text_vertical_alignment }} text-{{ text_horizontal_alignment }}">
                <div class="page-width">
                  {% unless block.settings.slide_title == blank and block.settings.subheading == blank %}
                    <ul class="slideshow__text-content-list">
                      {%- unless block.settings.slide_title == blank -%}
                        <li>
                          <h2 class="h1 mega-title slideshow__title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">
                            {{ block.settings.slide_title | escape }}
                          </h2>
                        </li>
                      {%- endunless -%}
                      {%- unless block.settings.subheading == blank -%}
                        <li>
                          <span class="mega-subtitle slideshow__subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">
                            {{ block.settings.subheading | escape }}
                          </span>
                        </li>
                      {%- endunless -%}
                    </ul>
                  {% endunless %}

                  {%- assign show_link_button = false -%}
                  {%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
                    {%- assign show_link_button = true -%}
                  {%- endif -%}
                  {%- if show_link_button -%}
                    <div class="slideshow__btn-wrapper{% if block.settings.slide_title != blank or block.settings.subheading != blank %} slideshow__btn-wrapper--push{% endif %}">
                      <a href="{{ block.settings.button_link }}" class="btn slideshow__btn">
                        {{ block.settings.button_label | escape }}
                      </a>
                    </div>
                  {%- endif -%}
                </div>
              </div>
            </div>
          </div>
        {%- endfor -%}
      </div>
      <div class="slideshow__controls">
        {%- if section.blocks.size > 1 -%}
          {%- assign arrows_width = section.blocks.size | times: 18 | plus: 115 -%}
          <div class="slideshow__arrows"
               style="width: {{- arrows_width -}}px">
            <button class="slideshow__arrow slideshow__arrow-left" aria-label="{{ 'sections.slideshow.previous_slide' | t }}">{% include 'icon-chevron-left' %}</button>
            <button class="slideshow__arrow slideshow__arrow-right" aria-label="{{ 'sections.slideshow.next_slide' | t }}">{% include 'icon-chevron-right' %}</button>
          </div>
          {%- if section.settings.autorotate -%}
            <button type="button" class="slideshow__pause" data-id="{{ section.id }}" aria-live="polite" aria-pressed="false">
              <span class="slideshow__pause-stop">
                {% include 'icon-pause' %}
                <span class="icon__fallback-text">{{ 'sections.slideshow.pause_slideshow' | t }}</span>
              </span>
              <span class="slideshow__pause-rotate">
                {% include 'icon-play' %}
                <span class="icon__fallback-text">{{ 'sections.slideshow.rotate_slideshow' | t }}</span>
              </span>
            </button>
          {%- endif -%}
        {%- endif -%}
      </div>
    </div>
    <div class="slideshow__text-wrap slideshow__text-wrap--mobile">
      {% if section.blocks.size > 1 %}
        <div class="slideshow__arrows slideshow__arrows--mobile">
          <button class="slideshow__arrow slideshow__arrow-left" aria-label="{{ 'sections.slideshow.previous_slide' | t }}">{% include 'icon-chevron-left' %}</button>
          <button class="slideshow__arrow slideshow__arrow-right" aria-label="{{ 'sections.slideshow.next_slide' | t }}">{% include 'icon-chevron-right' %}</button>
        </div>
      {% endif %}
      {%- for block in section.blocks -%}
        {%- assign show_text = false -%}
        {%- unless block.settings.slide_title == blank and block.settings.subheading == blank -%}
          {%- assign show_text = true -%}
        {%- endunless -%}
        {%- assign show_link_button = false -%}
        {%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
          {%- assign show_link_button = true -%}
        {%- endif -%}
        {%- if show_text or show_link_button -%}
          <div class="slideshow__text-content slideshow__text-content--mobile slideshow__text-content--mobile-{{ forloop.index0 }} text-center">
            <div class="page-width">
              {%- unless block.settings.slide_title == blank -%}
                <h2 class="h1 mega-title slideshow__title slideshow__title--mobile{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">
                  {{ block.settings.slide_title | escape }}
                </h2>
              {%- endunless -%}
              {%- unless block.settings.subheading == blank -%}
                <span class="mega-subtitle slideshow__subtitle slideshow__subtitle--mobile{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">
                  {{ block.settings.subheading | escape }}
                </span>
              {%- endunless -%}

              {%- if show_link_button -%}
                <a href="{{ block.settings.button_link }}" class="btn slideshow__btn slideshow__btn--mobile">
                  {{ block.settings.button_label | escape }}
                </a>
              {%- endif -%}
            </div>
          </div>
        {%- endif -%}
      {%- endfor -%}
    </div>
  {%- endif -%}

  {% if section.blocks.size == 0 %}
    <div class="placeholder-noblocks">
      {{ 'homepage.onboarding.no_content' | t }}
    </div>
  {% endif %}
</div>
</div>

{% schema %}
{
  "name": "Multi Device Slideshow",
  "class": "index-section index-section--flush index-section--slideshow",
  "max_blocks": 6,
  "settings": [
    {
      "type": "select",
      "id": "slideshow_height",
      "label": "Slide height",
      "default": "adapt",
      "info": "Learn more about [slideshow guidelines](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/debut#slideshow-sections-specific)",
      "options": [
        {
          "label": "Adapt first image",
          "value": "adapt"
        },
        {
          "label": "Small",
          "value": "small"
        },
        {
          "label": "Medium",
          "value": "medium"
        },
        {
          "label": "Large",
          "value": "large"
        }
      ]
    },
    {
      "type": "select",
      "id": "text_size",
      "label": "Text size",
      "default": "medium",
      "options": [
        {
          "label": "Medium",
          "value": "medium"
        },
        {
          "label": "Large",
          "value": "large"
        }
      ]
    },
    {
      "type": "select",
      "id": "text_alignment",
      "label": "Text alignment",
      "default": "center center",
      "options": [
        {
          "label": "Top left",
          "value": "left top"
        },
        {
          "label": "Top center",
          "value": "center top"
        },
        {
          "label": "Top right",
          "value": "right top"
        },
        {
          "label": "Middle left",
          "value": "left center"
        },
        {
          "label": "Middle center",
          "value": "center center"
        },
        {
          "label": "Middle right",
          "value": "right center"
        },
        {
          "label": "Bottom left",
          "value": "left bottom"
        },
        {
          "label": "Bottom center",
          "value": "center bottom"
        },
        {
          "label": "Bottom right",
          "value": "right bottom"
        }
      ]
    },
    {
      "type": "checkbox",
      "id": "show_overlay",
      "label": "Show overlay",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "autorotate",
      "label": "Auto-rotate slides",
      "default": false
    },
    {
      "type": "range",
      "id": "autorotate_speed",
      "label": "Change slides every",
      "max": 9,
      "min": 3,
      "step": 2,
      "unit": " s",
      "default": 5
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "Image slide",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Big device Image"
        },
        {
          "type": "image_picker",
          "id": "image_small",
          "label": "Small device image"
        },
        {
          "type": "select",
          "id": "alignment",
          "label": "Image position",
          "default": "center center",
          "options": [
            {
              "label": "Top left",
              "value": "left top"
            },
            {
              "label": "Top center",
              "value": "center top"
            },
            {
              "label": "Top right",
              "value": "right top"
            },
            {
              "label": "Middle left",
              "value": "left center"
            },
            {
              "label": "Middle center",
              "value": "center center"
            },
            {
              "label": "Middle right",
              "value": "right center"
            },
            {
              "label": "Bottom left",
              "value": "left bottom"
            },
            {
              "label": "Bottom center",
              "value": "center bottom"
            },
            {
              "label": "Bottom right",
              "value": "right bottom"
            }
          ]
        },
        {
          "type": "text",
          "id": "slide_title",
          "label": "Heading",
          "default": "Image slide"
        },
        {
          "type": "text",
          "id": "subheading",
          "label": "Subheading",
          "default": "Tell your brand's story through images"
        },
        {
          "type": "text",
          "id": "button_label",
          "label":"Button label"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Multi Device Slideshow",
      "category": "Image",
      "settings": {
        "autorotate": false,
        "autorotate_speed": 5
      },
      "blocks": [
        {
          "type": "image"
        },
        {
          "type": "image"
        }
      ]
    }
  ]
}
{% endschema %}

doesnt work