Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
{%- 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 %}
@cchallaLL
Copy link

cchallaLL commented Apr 7, 2021

doesnt work

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment