Slideshow

{% if section.blocks.size > 0 %}
{% if section.settings.autoplay and section.blocks.size > 1 %} {% style %} .slideshow__slide.slick-active:after { width: 100%; transition-delay: 1500ms; transition-duration: {{ section.settings.autoplay_speed | times: 1000 | minus: 1500 }}ms; } {% endstyle %} {% endif %} {%- assign natural_height = false -%} {% if section.settings.section_height == 'natural' %} {% comment %} Get first image's aspect ratio {% endcomment %} {% for block in section.blocks limit: 1 %} {% if block.settings.image != blank %} {%- assign natural_height = true -%} {%- capture natural_height_ratio -%}{{ 100 | divided_by: block.settings.image.aspect_ratio }}%{% endcapture %} {% endif %} {% endfor %} {% endif %} {% if natural_height %} {% style %} .hero-natural--{{ section.id }} { height: 0; padding-bottom: {{ natural_height_ratio }}; } {% endstyle %} {% endif %} {% if natural_height %}
{% endif %}
{% for block in section.blocks %}
{% style %} .slideshow__slide--{{ block.id }} .hero__title { font-size: {{ block.settings.title_size | times: 0.5 }}px; } @media only screen and (min-width: 769px) { .slideshow__slide--{{ block.id }} .hero__title { font-size: {{ block.settings.title_size }}px; } } {% endstyle %} {%- assign hero_text = false -%} {%- assign link_slide = false -%} {% if block.settings.title != blank or block.settings.subheading != blank or block.settings.link_text != blank %} {%- assign hero_text = true -%} {% endif %} {% if block.settings.link_text == blank and block.settings.link != blank %} {%- assign link_slide = true -%} {% endif %} {%- if section.settings.parallax -%} {% if block.settings.image != blank %} {% style %} .hero__image--{{ block.id }} { background-position: {{ block.settings.focal_point }}; background-size: cover; } {% endstyle %} {% endif %}
{% if block.settings.image == blank %} {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }} {% endif %}
{%- else -%}
{% if block.settings.image != blank %} {% style %} .hero__image--{{ block.id }} { object-position: {{ block.settings.focal_point }}; font-family: "object-fit: cover; object-position: {{ block.settings.focal_point }};"; } {% endstyle %} {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} {{ block.settings.image.alt | escape }} {% else %} {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }} {% endif %}
{%- endif -%} {% if link_slide %} {% endif %} {% if hero_text %} {% endif %} {% if link_slide %} {% endif %}
{% endfor %}
{% if natural_height %}
{% endif %}
{% endif %} {% if section.blocks.size == 0 %}
{{ 'home_page.onboarding.no_content' | t }}
{% endif %}
{% schema %} { "name": "Slideshow", "class": "index-section--hero", "max_blocks": 5, "settings": [ { "type": "select", "id": "section_height", "label": "Desktop height", "default": "650px", "options": [ { "label": "Natural", "value": "natural" }, { "label": "450px", "value": "450px" }, { "label": "550px", "value": "550px" }, { "label": "650px", "value": "650px" }, { "label": "750px", "value": "750px" }, { "label": "Full screen", "value": "100vh" } ] }, { "type": "select", "id": "mobile_height", "label": "Mobile height", "default": "auto", "info": "Not used if desktop height is set to natural", "options": [ { "label": "Auto", "value": "auto" }, { "label": "250px", "value": "250px" }, { "label": "300px", "value": "300px" }, { "label": "400px", "value": "400px" }, { "label": "500px", "value": "500px" }, { "label": "Full screen", "value": "100vh" } ] }, { "type": "checkbox", "id": "parallax", "label": "Enable parallax", "default": true }, { "type": "select", "id": "style", "label": "Slide navigation style", "default": "minimal", "options": [ { "value": "minimal", "label": "Minimal" }, { "value": "arrows", "label": "Arrows" }, { "value": "dots", "label": "Dots" } ] }, { "type": "checkbox", "id": "autoplay", "label": "Auto-change slides", "default": true }, { "type": "range", "id": "autoplay_speed", "label": "Change images every", "default": 7, "min": 5, "max": 10, "step": 1, "unit": "s" } ], "blocks": [ { "type": "image", "name": "Slide", "settings": [ { "type": "textarea", "id": "title", "label": "Heading", "default": "Two line\nslide title." }, { "type": "range", "id": "title_size", "label": "Heading text size", "default": 80, "min": 40, "max": 100, "unit": "px" }, { "type": "text", "id": "subheading", "label": "Subheading", "default": "And an optional subheading" }, { "type": "url", "id": "link", "label": "Slide link" }, { "type": "text", "id": "link_text", "label": "Slide link text", "default": "Optional button" }, { "type": "select", "id": "text_align", "label": "Text alignment", "default": "vertical-bottom horizontal-left", "options": [ { "value": "vertical-center horizontal-left", "label": "Center left" }, { "value": "vertical-center horizontal-center", "label": "Center" }, { "value": "vertical-center horizontal-right", "label": "Center right" }, { "value": "vertical-bottom horizontal-left", "label": "Bottom left" }, { "value": "vertical-bottom horizontal-center", "label": "Bottom center" }, { "value": "vertical-bottom horizontal-right", "label": "Bottom right" } ] }, { "type": "image_picker", "id": "image", "label": "Image" }, { "type": "select", "id": "focal_point", "label": "Image focal point", "info": "Used to keep the subject of your photo in view.", "default": "center center", "options": [ { "value": "top left", "label": "Top left" }, { "value": "top center", "label": "Top center" }, { "value": "top right", "label": "Top right" }, { "value": "center left", "label": "Left" }, { "value": "center center", "label": "Center" }, { "value": "center right", "label": "Right" }, { "value": "bottom left", "label": "Bottom left" }, { "value": "bottom center", "label": "Bottom center" }, { "value": "bottom right", "label": "Bottom right" } ] } ] } ], "presets": [{ "name": "Slideshow", "category": "Image", "settings": { "autoplay": true, "autoplay_speed": 5 }, "blocks": [ { "type": "image", "settings": { "title": "Endless\npossibilities.", "subheading": "Bring your brand to life" } }, { "type": "image", "settings": { "title": "Two line\nslide titles.", "subheading": "And big, beautiful imagery" } } ] }] } {% endschema %}