595 lines
22 KiB
Plaintext
595 lines
22 KiB
Plaintext
{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
|
|
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
|
|
{{ 'component-slideshow.css' | asset_url | stylesheet_tag }}
|
|
|
|
{%- if section.settings.slide_height == 'adapt_image' and section.blocks.first.settings.image != blank -%}
|
|
{%- style -%}
|
|
@media screen and (max-width: 749px) {
|
|
#Slider-{{ section.id }}::before,
|
|
#Slider-{{ section.id }} .media::before,
|
|
#Slider-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
|
|
padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
|
|
content: '';
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 750px) {
|
|
#Slider-{{ section.id }}::before,
|
|
#Slider-{{ section.id }} .media::before {
|
|
padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
|
|
content: '';
|
|
display: block;
|
|
}
|
|
}
|
|
{%- endstyle -%}
|
|
{%- endif -%}
|
|
|
|
<slideshow-component
|
|
class="slider-mobile-gutter{% if section.settings.layout == 'grid' %} page-width{% endif %}{% if section.settings.show_text_below %} mobile-text-below{% endif %}"
|
|
role="region"
|
|
aria-roledescription="{{ 'sections.slideshow.carousel' | t }}"
|
|
aria-label="{{ section.settings.accessibility_info | escape }}"
|
|
>
|
|
{%- if section.settings.auto_rotate and section.blocks.size > 1 -%}
|
|
<div class="slideshow__controls slideshow__controls--top slider-buttons no-js-hidden{% if section.settings.show_text_below %} slideshow__controls--border-radius-mobile{% endif %}">
|
|
<button
|
|
type="button"
|
|
class="slider-button slider-button--prev"
|
|
name="previous"
|
|
aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}"
|
|
aria-controls="Slider-{{ section.id }}"
|
|
>
|
|
{% render 'icon-caret' %}
|
|
</button>
|
|
<div class="slider-counter slider-counter--{{ section.settings.slider_visual }}{% if section.settings.slider_visual == 'counter' or section.settings.slider_visual == 'numbers' %} caption{% endif %}">
|
|
{%- if section.settings.slider_visual == 'counter' -%}
|
|
<span class="slider-counter--current">1</span>
|
|
<span aria-hidden="true"> / </span>
|
|
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
|
|
<span class="slider-counter--total">{{ section.blocks.size }}</span>
|
|
{%- else -%}
|
|
<div class="slideshow__control-wrapper">
|
|
{%- for block in section.blocks -%}
|
|
<button
|
|
class="slider-counter__link slider-counter__link--{{ section.settings.slider_visual }} link"
|
|
aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
|
|
aria-controls="Slider-{{ section.id }}"
|
|
>
|
|
{%- if section.settings.slider_visual == 'numbers' -%}
|
|
{{ forloop.index -}}
|
|
{%- else -%}
|
|
<span class="dot"></span>
|
|
{%- endif -%}
|
|
</button>
|
|
{%- endfor -%}
|
|
</div>
|
|
{%- endif -%}
|
|
</div>
|
|
<button
|
|
type="button"
|
|
class="slider-button slider-button--next"
|
|
name="next"
|
|
aria-label="{{ 'sections.slideshow.next_slideshow' | t }}"
|
|
aria-controls="Slider-{{ section.id }}"
|
|
>
|
|
{% render 'icon-caret' %}
|
|
</button>
|
|
|
|
{%- if section.settings.auto_rotate -%}
|
|
<button
|
|
type="button"
|
|
class="slideshow__autoplay slider-button no-js-hidden{% if section.settings.auto_rotate == false %} slideshow__autoplay--paused{% endif %}"
|
|
aria-label="{{ 'sections.slideshow.pause_slideshow' | t }}"
|
|
>
|
|
{%- render 'icon-pause' -%}
|
|
{%- render 'icon-play' -%}
|
|
</button>
|
|
{%- endif -%}
|
|
</div>
|
|
<noscript>
|
|
<div class="slider-buttons">
|
|
<div class="slider-counter">
|
|
{%- for block in section.blocks -%}
|
|
<a
|
|
href="#Slide-{{ section.id }}-{{ forloop.index }}"
|
|
class="slider-counter__link link"
|
|
aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
|
|
>
|
|
{{ forloop.index }}
|
|
</a>
|
|
{%- endfor -%}
|
|
</div>
|
|
</div>
|
|
</noscript>
|
|
{%- endif -%}
|
|
|
|
<div
|
|
class="slideshow banner banner--{{ section.settings.slide_height }} grid grid--1-col slider slider--everywhere{% if section.settings.show_text_below %} banner--mobile-bottom{% endif %}{% if section.blocks.first.settings.image == blank %} slideshow--placeholder{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
|
|
id="Slider-{{ section.id }}"
|
|
aria-live="polite"
|
|
aria-atomic="true"
|
|
data-autoplay="{{ section.settings.auto_rotate }}"
|
|
data-speed="{{ section.settings.change_slides_speed }}"
|
|
>
|
|
{%- for block in section.blocks -%}
|
|
<style>
|
|
#Slide-{{ section.id }}-{{ forloop.index }} .banner__media::after {
|
|
opacity: {{ block.settings.image_overlay_opacity | divided_by: 100.0 }};
|
|
}
|
|
</style>
|
|
<div
|
|
class="slideshow__slide grid__item grid--1-col slider__slide"
|
|
id="Slide-{{ section.id }}-{{ forloop.index }}"
|
|
{{ block.shopify_attributes }}
|
|
role="group"
|
|
aria-roledescription="{{ 'sections.slideshow.slide' | t }}"
|
|
aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
|
|
tabindex="-1"
|
|
>
|
|
<div class="slideshow__media banner__media media{% if block.settings.image == blank %} placeholder{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}">
|
|
{%- if block.settings.image -%}
|
|
{%- liquid
|
|
assign height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round
|
|
if section.settings.image_behavior == 'ambient'
|
|
assign sizes = '120vw'
|
|
assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
|
|
else
|
|
assign sizes = '100vw'
|
|
assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
|
|
endif
|
|
assign fetch_priority = 'auto'
|
|
if section.index == 1
|
|
assign fetch_priority = 'high'
|
|
endif
|
|
-%}
|
|
{%- if forloop.first %}
|
|
{{
|
|
block.settings.image
|
|
| image_url: width: 3840
|
|
| image_tag: height: height, sizes: sizes, widths: widths, fetchpriority: fetch_priority
|
|
}}
|
|
{%- else -%}
|
|
{{
|
|
block.settings.image
|
|
| image_url: width: 3840
|
|
| image_tag: loading: 'lazy', height: height, sizes: sizes, widths: widths
|
|
}}
|
|
{%- endif -%}
|
|
{%- else -%}
|
|
{%- assign placeholder_slide = forloop.index | modulo: 2 -%}
|
|
{%- if placeholder_slide == 1 -%}
|
|
{{ 'hero-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }}
|
|
{%- else -%}
|
|
{{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
|
|
{%- endif -%}
|
|
{%- endif -%}
|
|
</div>
|
|
<div class="slideshow__text-wrapper banner__content banner__content--{{ block.settings.box_align }} page-width{% if block.settings.show_text_box == false %} banner--desktop-transparent{% endif %}{% if settings.animations_reveal_on_scroll and forloop.index == 1 %} scroll-trigger animate--slide-in{% endif %}">
|
|
<div class="slideshow__text banner__box content-container content-container--full-width-mobile color-{{ block.settings.color_scheme }} gradient slideshow__text--{{ block.settings.text_alignment }} slideshow__text-mobile--{{ block.settings.text_alignment_mobile }}">
|
|
{%- if block.settings.heading != blank -%}
|
|
<h2 class="banner__heading inline-richtext {{ block.settings.heading_size }}">
|
|
{{ block.settings.heading }}
|
|
</h2>
|
|
{%- endif -%}
|
|
{%- if block.settings.subheading != blank -%}
|
|
<div class="banner__text rte" {{ block.shopify_attributes }}>
|
|
<p>{{ block.settings.subheading }}</p>
|
|
</div>
|
|
{%- endif -%}
|
|
{%- if block.settings.button_label != blank -%}
|
|
<div class="banner__buttons">
|
|
<a
|
|
{% if block.settings.link %}
|
|
href="{{ block.settings.link }}"
|
|
{% else %}
|
|
role="link" aria-disabled="true"
|
|
{% endif %}
|
|
class="button {% if block.settings.button_style_secondary %}button--secondary{% else %}button--primary{% endif %}"
|
|
>
|
|
{{- block.settings.button_label | escape -}}
|
|
</a>
|
|
</div>
|
|
{%- endif -%}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{%- endfor -%}
|
|
</div>
|
|
|
|
{%- if section.blocks.size > 1 and section.settings.auto_rotate == false -%}
|
|
<div class="slideshow__controls slider-buttons no-js-hidden{% if section.settings.show_text_below %} slideshow__controls--border-radius-mobile{% endif %}">
|
|
<button
|
|
type="button"
|
|
class="slider-button slider-button--prev"
|
|
name="previous"
|
|
aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}"
|
|
aria-controls="Slider-{{ section.id }}"
|
|
>
|
|
{% render 'icon-caret' %}
|
|
</button>
|
|
<div class="slider-counter slider-counter--{{ section.settings.slider_visual }}{% if section.settings.slider_visual == 'counter' or section.settings.slider_visual == 'numbers' %} caption{% endif %}">
|
|
{%- if section.settings.slider_visual == 'counter' -%}
|
|
<span class="slider-counter--current">1</span>
|
|
<span aria-hidden="true"> / </span>
|
|
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
|
|
<span class="slider-counter--total">{{ section.blocks.size }}</span>
|
|
{%- else -%}
|
|
<div class="slideshow__control-wrapper">
|
|
{%- for block in section.blocks -%}
|
|
<button
|
|
class="slider-counter__link slider-counter__link--{{ section.settings.slider_visual }} link"
|
|
aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
|
|
aria-controls="Slider-{{ section.id }}"
|
|
>
|
|
{%- if section.settings.slider_visual == 'numbers' -%}
|
|
{{ forloop.index -}}
|
|
{%- else -%}
|
|
<span class="dot"></span>
|
|
{%- endif -%}
|
|
</button>
|
|
{%- endfor -%}
|
|
</div>
|
|
{%- endif -%}
|
|
</div>
|
|
<button
|
|
type="button"
|
|
class="slider-button slider-button--next"
|
|
name="next"
|
|
aria-label="{{ 'sections.slideshow.next_slideshow' | t }}"
|
|
aria-controls="Slider-{{ section.id }}"
|
|
>
|
|
{% render 'icon-caret' %}
|
|
</button>
|
|
|
|
{%- if section.settings.auto_rotate -%}
|
|
<button
|
|
type="button"
|
|
class="slideshow__autoplay slider-button no-js-hidden{% if section.settings.auto_rotate == false %} slideshow__autoplay--paused{% endif %}"
|
|
aria-label="{{ 'sections.slideshow.pause_slideshow' | t }}"
|
|
>
|
|
{%- render 'icon-pause' -%}
|
|
{%- render 'icon-play' -%}
|
|
</button>
|
|
{%- endif -%}
|
|
</div>
|
|
<noscript>
|
|
<div class="slider-buttons">
|
|
<div class="slider-counter">
|
|
{%- for block in section.blocks -%}
|
|
<a
|
|
href="#Slide-{{ section.id }}-{{ forloop.index }}"
|
|
class="slider-counter__link link"
|
|
aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
|
|
>
|
|
{{ forloop.index }}
|
|
</a>
|
|
{%- endfor -%}
|
|
</div>
|
|
</div>
|
|
</noscript>
|
|
{%- endif -%}
|
|
</slideshow-component>
|
|
|
|
{%- if request.design_mode -%}
|
|
<script src="{{ 'theme-editor.js' | asset_url }}" defer="defer"></script>
|
|
{%- endif -%}
|
|
|
|
{% schema %}
|
|
{
|
|
"name": "t:sections.slideshow.name",
|
|
"tag": "section",
|
|
"class": "section",
|
|
"disabled_on": {
|
|
"groups": ["header", "footer"]
|
|
},
|
|
"settings": [
|
|
{
|
|
"type": "select",
|
|
"id": "layout",
|
|
"options": [
|
|
{
|
|
"value": "full_bleed",
|
|
"label": "t:sections.slideshow.settings.layout.options__1.label"
|
|
},
|
|
{
|
|
"value": "grid",
|
|
"label": "t:sections.slideshow.settings.layout.options__2.label"
|
|
}
|
|
],
|
|
"default": "full_bleed",
|
|
"label": "t:sections.slideshow.settings.layout.label"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "slide_height",
|
|
"options": [
|
|
{
|
|
"value": "adapt_image",
|
|
"label": "t:sections.slideshow.settings.slide_height.options__1.label"
|
|
},
|
|
{
|
|
"value": "small",
|
|
"label": "t:sections.slideshow.settings.slide_height.options__2.label"
|
|
},
|
|
{
|
|
"value": "medium",
|
|
"label": "t:sections.slideshow.settings.slide_height.options__3.label"
|
|
},
|
|
{
|
|
"value": "large",
|
|
"label": "t:sections.slideshow.settings.slide_height.options__4.label"
|
|
}
|
|
],
|
|
"default": "medium",
|
|
"label": "t:sections.slideshow.settings.slide_height.label"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "slider_visual",
|
|
"options": [
|
|
{
|
|
"value": "dots",
|
|
"label": "t:sections.slideshow.settings.slider_visual.options__2.label"
|
|
},
|
|
{
|
|
"value": "counter",
|
|
"label": "t:sections.slideshow.settings.slider_visual.options__1.label"
|
|
},
|
|
{
|
|
"value": "numbers",
|
|
"label": "t:sections.slideshow.settings.slider_visual.options__3.label"
|
|
}
|
|
],
|
|
"default": "counter",
|
|
"label": "t:sections.slideshow.settings.slider_visual.label"
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "auto_rotate",
|
|
"label": "t:sections.slideshow.settings.auto_rotate.label",
|
|
"default": false
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "change_slides_speed",
|
|
"min": 3,
|
|
"max": 9,
|
|
"step": 2,
|
|
"unit": "s",
|
|
"label": "t:sections.slideshow.settings.change_slides_speed.label",
|
|
"default": 5
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "t:sections.all.animation.content"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "image_behavior",
|
|
"options": [
|
|
{
|
|
"value": "none",
|
|
"label": "t:sections.all.animation.image_behavior.options__1.label"
|
|
},
|
|
{
|
|
"value": "ambient",
|
|
"label": "t:sections.all.animation.image_behavior.options__2.label"
|
|
}
|
|
],
|
|
"default": "none",
|
|
"label": "t:sections.all.animation.image_behavior.label"
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "t:sections.slideshow.settings.mobile.content"
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "show_text_below",
|
|
"label": "t:sections.slideshow.settings.show_text_below.label",
|
|
"default": true
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "t:sections.slideshow.settings.accessibility.content"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "accessibility_info",
|
|
"label": "t:sections.slideshow.settings.accessibility.label",
|
|
"info": "t:sections.slideshow.settings.accessibility.info",
|
|
"default": "Slideshow about our brand"
|
|
}
|
|
],
|
|
"blocks": [
|
|
{
|
|
"type": "slide",
|
|
"name": "t:sections.slideshow.blocks.slide.name",
|
|
"limit": 5,
|
|
"settings": [
|
|
{
|
|
"type": "image_picker",
|
|
"id": "image",
|
|
"label": "t:sections.slideshow.blocks.slide.settings.image.label"
|
|
},
|
|
{
|
|
"type": "inline_richtext",
|
|
"id": "heading",
|
|
"default": "Image slide",
|
|
"label": "t:sections.slideshow.blocks.slide.settings.heading.label"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "heading_size",
|
|
"options": [
|
|
{
|
|
"value": "h2",
|
|
"label": "t:sections.all.heading_size.options__1.label"
|
|
},
|
|
{
|
|
"value": "h1",
|
|
"label": "t:sections.all.heading_size.options__2.label"
|
|
},
|
|
{
|
|
"value": "h0",
|
|
"label": "t:sections.all.heading_size.options__3.label"
|
|
}
|
|
],
|
|
"default": "h1",
|
|
"label": "t:sections.all.heading_size.label"
|
|
},
|
|
{
|
|
"type": "inline_richtext",
|
|
"id": "subheading",
|
|
"default": "Tell your brand's story through images",
|
|
"label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "button_label",
|
|
"default": "Button label",
|
|
"label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
|
|
"info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
|
|
},
|
|
{
|
|
"type": "url",
|
|
"id": "link",
|
|
"label": "t:sections.slideshow.blocks.slide.settings.link.label"
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "button_style_secondary",
|
|
"label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
|
|
"default": false
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "box_align",
|
|
"options": [
|
|
{
|
|
"value": "top-left",
|
|
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__1.label"
|
|
},
|
|
{
|
|
"value": "top-center",
|
|
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__2.label"
|
|
},
|
|
{
|
|
"value": "top-right",
|
|
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__3.label"
|
|
},
|
|
{
|
|
"value": "middle-left",
|
|
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__4.label"
|
|
},
|
|
{
|
|
"value": "middle-center",
|
|
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__5.label"
|
|
},
|
|
{
|
|
"value": "middle-right",
|
|
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__6.label"
|
|
},
|
|
{
|
|
"value": "bottom-left",
|
|
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__7.label"
|
|
},
|
|
{
|
|
"value": "bottom-center",
|
|
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__8.label"
|
|
},
|
|
{
|
|
"value": "bottom-right",
|
|
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__9.label"
|
|
}
|
|
],
|
|
"default": "middle-center",
|
|
"label": "t:sections.slideshow.blocks.slide.settings.box_align.label",
|
|
"info": "t:sections.slideshow.blocks.slide.settings.box_align.info"
|
|
},
|
|
{
|
|
"type": "checkbox",
|
|
"id": "show_text_box",
|
|
"label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
|
|
"default": true
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "text_alignment",
|
|
"options": [
|
|
{
|
|
"value": "left",
|
|
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_1.label"
|
|
},
|
|
{
|
|
"value": "center",
|
|
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_2.label"
|
|
},
|
|
{
|
|
"value": "right",
|
|
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_3.label"
|
|
}
|
|
],
|
|
"default": "center",
|
|
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.label"
|
|
},
|
|
{
|
|
"type": "range",
|
|
"id": "image_overlay_opacity",
|
|
"min": 0,
|
|
"max": 100,
|
|
"step": 10,
|
|
"unit": "%",
|
|
"label": "t:sections.slideshow.blocks.slide.settings.image_overlay_opacity.label",
|
|
"default": 0
|
|
},
|
|
{
|
|
"type": "color_scheme",
|
|
"id": "color_scheme",
|
|
"label": "t:sections.all.colors.label",
|
|
"default": "scheme-1"
|
|
},
|
|
{
|
|
"type": "header",
|
|
"content": "t:sections.slideshow.settings.mobile.content"
|
|
},
|
|
{
|
|
"type": "select",
|
|
"id": "text_alignment_mobile",
|
|
"options": [
|
|
{
|
|
"value": "left",
|
|
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__1.label"
|
|
},
|
|
{
|
|
"value": "center",
|
|
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__2.label"
|
|
},
|
|
{
|
|
"value": "right",
|
|
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__3.label"
|
|
}
|
|
],
|
|
"default": "center",
|
|
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.label"
|
|
}
|
|
]
|
|
}
|
|
],
|
|
"presets": [
|
|
{
|
|
"name": "t:sections.slideshow.presets.name",
|
|
"blocks": [
|
|
{
|
|
"type": "slide"
|
|
},
|
|
{
|
|
"type": "slide"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
{% endschema %}
|