Untitled
unknown
plain_text
a year ago
32 kB
4
Indexable
{{ 'slideshow.css' | asset_url | stylesheet_tag }}
{% liquid
assign first_block = section.blocks[0]
assign aspect_ratio = first_block.settings.background.aspect_ratio | default: 2.333
assign aspect_ratio_mobile = first_block.settings.mb_background.aspect_ratio | default: aspect_ratio
assign use_content_above = section.settings.use_content_above
assign animation_effect = settings.animations
assign animated = false
if animation_effect != 'none'
assign animated = true
if section.settings.animations != 'inherit'
assign animation_effect = section.settings.animations
endif
endif
assign container = section.settings.container
if container == 'w-full'
assign container = 'container-full'
endif
assign slider_pagination_class = 'm-dot-circle m-dot-circle--' | append: section.settings.dots_color
if section.settings.dots_position != 'bottom'
assign slider_pagination_class = slider_pagination_class | append: ' swiper-pagination--vertical'
endif
assign slider_controls_position = section.settings.dots_position | replace: 'bottom', 'bottom-center' | replace: 'left', 'middle-left' | replace: 'right', 'middle-right'
assign slider_controls_class = ''
if section.settings.show_arrows
assign slider_controls_class = slider_controls_class | append: ' m-slider-controls--show-nav'
endif
if section.settings.show_dots
assign slider_controls_class = slider_controls_class | append: ' m-slider-controls--show-pagination'
assign slider_controls_class = slider_controls_class | append: ' m-slider-controls--pagination-' | append: section.settings.dots_position
endif
assign dots_color = "#222222"
if section.settings.dots_color == 'light'
assign dots_color = "#ffffff"
endif
%}
<section
id="m-slider-{{ section.id }}"
class="m-section m-slider m-slider--{{ section.settings.slideshow_height }} {% unless use_content_above %} m-slider--content-stack{% endunless %} {{ section.settings.custom_class }}"
data-section-type="slider" data-section-id="{{ section.id }}"
style="--data-autoplay-speed: {{ section.settings.autorotate_speed }}s;">
<div class="{{ container }}">
<m-slideshow
class="m:block {{ slider_controls_class }}"
data-id="{{ section.id }}"
data-autoplay="{% if request.design_mode %}false{% else %}{{ section.settings.autorotate }}{% endif %}"
data-autoplay-speed="{{ section.settings.autorotate_speed }}"
data-enable-arrows="{{ section.settings.show_arrows }}"
data-enable-dots="{{ section.settings.show_dots }}"
data-slide-height="{{ section.settings.slideshow_height }}"
>
<div class="swiper-container">
<div class="swiper-wrapper">
{% for block in section.blocks %}
{% liquid
assign content_positions = block.settings.content_position | split: ' '
assign text_alignment = block.settings.text_alignment
assign text_horizontal_alignment = content_positions.first
assign text_vertical_alignment = content_positions.last | strip
assign footer_alignment = block.settings.footer_alignment
assign image_link = block.settings.image_link
assign should_show_content = false
if block.settings.title != blank or block.settings.subheading != blank or block.settings.description != blank or block.settings.button_text != blank
assign should_show_content = true
endif
assign content_container = 'container-fluid'
if block.settings.content_in_container == true
assign content_container = 'container'
endif
assign video_urls = block.settings.video | newline_to_br | split: '<br />'
assign bg_image = block.settings.background
if block.settings.mb_background != blank
assign bg_image = block.settings.mb_background
endif
assign text_size = block.settings.text_size
assign sub_text_size = 'h6'
assign heading_text_size = 'h2'
if text_size == 'large'
assign sub_text_size = 'h5'
assign heading_text_size = 'h1'
endif
assign text_color = block.settings.text_color
if text_color == 'black'
assign colorBtn = '#000'
assign colorBtnHover = '#FFF'
else
assign colorBtn = '#FFF'
assign colorBtnHover = '#000'
endif
%}
{% capture video_bg %}
<video playsinline muted autoplay loop preload="auto">
{% for video in video_urls %}
{% liquid
assign video_url = video | split: '?v='
assign video_url = video_url | first | strip_newlines
assign format = 'mp4'
if video_url contains '.webm' or video_url contains '.WEBM'
assign format = 'webm'
endif
if video_url contains '.mov' or video_url contains '.MOV'
assign format = 'mp4'
endif
%}
{% comment %}theme-check-disable RemoteAsset{% endcomment %}
<source src="{{ video_url }}" type="video/{{ format }}">
{% comment %}theme-check-enable RemoteAsset{% endcomment %}
{% endfor %}
{{ 'sections.slider.video.notice' }}
</video>
{% endcapture %}
<div {{ block.shopify_attributes }}
data-slide="{{ forloop.index0 }}"
class="swiper-slide"
data-slide-type="{{ block.type }}"
>
<div class="m-slide m-slide--{{ text_vertical_alignment }}-{{ text_horizontal_alignment }} m-slide--text-{{ block.settings.text_size }}{% if image_link != blank %} m-slide--has-link{% endif %}">
<div
class="m-slide__media"
{% if section.settings.slideshow_height == 'adapt' %}
style="--aspect-ratio: {{ aspect_ratio }}; --aspect-ratio-mobile: {{ aspect_ratio_mobile }}"
{% endif %}
>
{% if image_link != blank %}
<a href="{{ image_link }}" class="m-hidden-link"></a>
{% endif %}
{% comment %} Image on desktop {% endcomment %}
<div class="m:hidden md:m:block">
<div class="m-slide__bg{% if block.settings.background == blank and block.settings.video == blank %} m-slide__placeholder{% endif %}">
{% if block.settings.background == blank and block.settings.video == blank %}
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'm-placeholder-svg m:w-full m:h-full' }}
{% else %}
{% if block.type == 'video_slide' %}
{{ video_bg }}
{% else %}
{%- liquid
assign image_height = block.settings.background.width | divided_by: block.settings.background.aspect_ratio | round
assign lazy_load = 'eager'
unless forloop.first
assign lazy_load = 'lazy'
endunless
-%}
{{ block.settings.background | image_url: width: 3840 | image_tag:
loading: lazy_load,
width: block.settings.background.width,
height: image_height,
sizes: '100vw',
widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
alt: block.settings.background.alt | escape
}}
{% endif %}
{% endif %}
</div>
</div>
{% comment %} Image on mobile {% endcomment %}
<div class="md:m:hidden">
<div class="m-slide__bg--mobile{% if bg_image == blank and block.settings.video == blank %} m-slide__placeholder{% endif %}" style="--aspect-ratio-mobile: {{ aspect_ratio_mobile }}">
{% if bg_image == blank and block.settings.video == blank %}
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'm-placeholder-svg m:w-full m:h-full' }}
{% else %}
{% if block.type == 'video_slide' and bg_image == blank %}
{{ video_bg }}
{% else %}
{%- liquid
assign bg_image_height = bg_image.width | divided_by: bg_image.aspect_ratio | round
assign lazy_load = 'eager'
unless forloop.first
assign lazy_load = 'lazy'
endunless
-%}
{{ bg_image | image_url: width: 1100 | image_tag:
loading: lazy_load,
width: bg_image.width,
height: bg_image_height,
sizes: '100vw',
widths: '375, 550, 750, 1100',
alt: bg_image.alt | escape
}}
{% if image_link != blank %}
<a href="{{ image_link }}" class="m-hidden-link"></a>
{% endif %}
{% endif %}
{% endif %}
</div>
</div>
{% if section.settings.show_overlay %}
<div class="m-slide__overlay"></div>
{% endif %}
</div>
{% if should_show_content %}
{%- liquid
assign button_style = block.settings.button_style | replace: 'sf__btn-secondary', 'm-button--secondary' | replace: 'sf__btn-primary', 'm-button--primary' | replace: 'sf__btn-white', 'm-button--white' | replace: 'sf__btn-link', 'm-button--link'
-%}
<div
class="m-slide__wrapper {{ content_container }} {% if animated %} m-slide-animate--{{ animation_effect }}{% endif %}"
style="--btn-color: {{ colorBtn }};--btn-color-hover: {{ colorBtnHover }};"
>
<div class="m-slide__content m-richtext m:text-{{ text_alignment }}">
{% if block.settings.subheading != blank %}
<div class="m-richtext__subtitle m-slide__subtitle m:text-{{ text_color }} {{ sub_text_size }}">{{ block.settings.subheading }}</div>
{% endif %}
{% if block.settings.title != blank %}
<h2 class="m-richtext__title m-slide__title m:text-{{ text_color }} {{ heading_text_size }}">{{ block.settings.title }}</h2>
{% endif %}
{% if block.settings.description != blank %}
<div class="m-richtext__description m-slide__description m:text-{{ text_color }} {{ sub_text_size }}">{{ block.settings.description }}</div>
{% endif %}
{% if block.settings.button_text != blank %}
<div class="m-richtext__button m-slide__button">
<a href="{{ block.settings.button_link | default: "#" }}" class="m-button {{ button_style }} {{ block.settings.button_size }}">{{ block.settings.button_text }}</a>
</div>
{% endif %}
</div>
</div>
{% endif %}
{% if block.settings.show_footer %}
<div
class="m-slider__footer m-slider__footer--{{ footer_alignment }} {{ content_container }} m:flex m:items-center m:justify-{{ footer_alignment }} m:text-{{ block.settings.text_color }}"
style="--btn-color: {{ colorBtn }};"
>
<span>{{ block.settings.footer_text }}</span>
{% if block.settings.footer_link != blank %}
<span>|</span>
<a href="{{ block.settings.footer_link | default: "#" }}" class="m-button m-button--link">
{{ block.settings.footer_button }}
</a>
{% endif %}
</div>
{% endif %}
</div>
</div><!-- .swiper-slide -->
{% endfor %}
</div><!-- .swiper-wrapper -->
{% if section.blocks.size > 1 %}
{% if section.settings.show_dots or section.settings.show_arrows %}
<div class="m-slider-controls m-slider-controls--absolute {{ slider_controls_class }} m-slider-controls--{{ slider_controls_position }}" style="--swiper-controls-color: {{ dots_color }};">
<div class="m-slider-controls__wrapper">
{% if section.settings.show_arrows %}
<button class="m-slider-controls__button m-slider-controls__button-prev swiper-button-prev" aria-label="Previous">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25 30L15 20L25 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
{% endif %}
{% if section.settings.show_dots %}
<div class="swiper-pagination m:w-full {{ slider_pagination_class }}"></div>
{% endif %}
{% if section.settings.show_arrows %}
<button class="m-slider-controls__button m-slider-controls__button-next swiper-button-next" aria-label="Next">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 30L25 20L15 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
{% endif %}
</div>
</div>
{% endif %}
{% endif %}
</div><!-- .swiper-container -->
</m-slideshow>
</div><!-- End section container -->
</section>
{% schema %}
{
"name": "Slideshow",
"disabled_on": {
"groups": [
"header",
"footer"
]
},
"max_blocks": 6,
"settings": [
{
"type": "paragraph",
"content": "[Watch tutorial](https://foxecom.link/WhIEIt)"
},
{
"type": "header",
"content": "General"
},
{
"type": "select",
"id": "container",
"label": "Container type",
"default": "w-full",
"options": [
{
"value": "container-fluid",
"label": "Default"
},
{
"value": "w-full",
"label": "Full width"
},
{
"value": "container",
"label": "Use container box"
}
]
},
{
"type": "select",
"id": "slideshow_height",
"label": "Slide height",
"default": "adapt",
"options": [
{
"label": "Adapt to first slide image",
"value": "adapt"
},
{
"label": "Small",
"value": "small"
},
{
"label": "Medium",
"value": "medium"
},
{
"label": "Large",
"value": "large"
},
{
"label": "Full screen",
"value": "fullscreen"
}
],
"info": "Only applies to screens > 767px"
},
{
"type": "checkbox",
"id": "show_overlay",
"label": "Show overlay",
"default": false
},
{
"type": "select",
"id": "dots_position",
"label": "Pagination position",
"default": "bottom",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "bottom",
"label": "Bottom"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "select",
"id": "dots_color",
"label": "Controls color",
"default": "dark",
"options": [
{
"value": "dark",
"label": "Dark"
},
{
"value": "light",
"label": "Light"
}
]
},
{
"type": "checkbox",
"id": "show_dots",
"label": "Show pagination",
"default": true
},
{
"type": "checkbox",
"id": "show_arrows",
"label": "Show navigation",
"default": false
},
{
"type": "checkbox",
"id": "autorotate",
"label": "Auto-rotate slides",
"default": false
},
{
"type": "range",
"id": "autorotate_speed",
"label": "Change slides every",
"info": "Work when auto-rotate",
"max": 10,
"min": 2,
"step": 1,
"unit": "s",
"default": 5
},
{
"type": "header",
"content": "Mobile settings"
},
{
"type": "checkbox",
"id": "use_content_above",
"label": "Use content above the image",
"default": false
},
{
"type": "header",
"content": "Advanced"
},
{
"type": "text",
"id": "custom_class",
"label": "Custom classes"
},
{
"type": "header",
"content": "Animations"
},
{
"type": "select",
"id": "animations",
"label": "Visible in the view animation",
"default": "inherit",
"options": [
{
"value": "inherit",
"label": "Inherit global setting"
},
{
"value": "fade-in",
"label": "Fade in"
},
{
"value": "fade-in-up",
"label": "Fade in up"
},
{
"value": "fade-in-left",
"label": "Fade in left"
},
{
"value": "fade-in-right",
"label": "Fade in right"
}
]
}
],
"blocks": [
{
"type": "slider_item",
"name": "Image slide",
"settings": [
{
"type": "header",
"content": "Background settings"
},
{
"type": "image_picker",
"id": "background",
"label": "Image on desktop",
"info": "1920 x 900px recommended"
},
{
"type": "image_picker",
"id": "mb_background",
"label": "Image on mobile",
"info": "600 x 480px recommended"
},
{
"type": "header",
"content": "Content"
},
{
"type": "checkbox",
"id": "content_in_container",
"label": "Content in container box",
"default": false
},
{
"type": "select",
"id": "content_position",
"label": "Content position",
"default": "center middle",
"options": [
{
"label": "Top left",
"value": "left top"
},
{
"label": "Top center",
"value": "center top"
},
{
"label": "Top right",
"value": "right top"
},
{
"label": "Middle left",
"value": "left middle"
},
{
"label": "Middle center",
"value": "center middle"
},
{
"label": "Middle right",
"value": "right middle"
},
{
"label": "Bottom left",
"value": "left bottom"
},
{
"label": "Bottom center",
"value": "center bottom"
},
{
"label": "Bottom right",
"value": "right bottom"
}
]
},
{
"type": "select",
"id": "text_alignment",
"label": "Content alignment",
"default": "center",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "select",
"id": "text_size",
"label": "Text size",
"default": "medium",
"options": [
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
]
},
{
"type": "select",
"id": "text_color",
"label": "Text color",
"default": "black",
"options": [
{
"value": "black",
"label": "Dark"
},
{
"value": "white",
"label": "Light"
}
]
},
{
"type": "textarea",
"id": "subheading",
"label": "Subheading",
"info": "Allow custom HTML"
},
{
"type": "textarea",
"id": "title",
"label": "Heading",
"default": "New Collection",
"info": "Allow custom HTML"
},
{
"type": "richtext",
"id": "description",
"label": "Description",
"default": "<p>Tell your campaign through images</p>"
},
{
"type": "url",
"id": "image_link",
"label": "Image link",
"info": "Link to image"
},
{
"type": "header",
"content": "Button"
},
{
"type": "text",
"id": "button_text",
"label": "Button label",
"default": "Shop now"
},
{
"type": "url",
"id": "button_link",
"label": "Button link"
},
{
"type": "select",
"id": "button_style",
"label": "Button style",
"options": [
{
"value": "m-button--primary",
"label": "Primary button"
},
{
"value": "m-button--secondary",
"label": "Secondary button"
},
{
"value": "m-button--white",
"label": "White button"
},
{
"value": "m-button--link",
"label": "Underline button"
}
],
"default": "m-button--primary"
},
{
"type": "select",
"id": "button_size",
"label": "Button size",
"options": [
{
"value": "m-button--small",
"label": "Button small"
},
{
"value": "",
"label": "Button medium"
},
{
"value": "m-button--large",
"label": "Button large"
}
],
"default": ""
},
{
"type": "header",
"content": "Footer"
},
{
"type": "checkbox",
"id": "show_footer",
"default": false,
"label": "Show footer"
},
{
"type": "select",
"id": "footer_alignment",
"label": "Footer alignment",
"options": [
{
"value": "start",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "end",
"label": "Right"
}
],
"default": "end"
},
{
"type": "text",
"id": "footer_text",
"label": "Footer text",
"default": "New Collection"
},
{
"type": "text",
"id": "footer_button",
"label": "Footer button",
"default": "Shop Now"
},
{
"type": "url",
"id": "footer_link",
"label": "Footer link"
}
]
},
{
"type": "video_slide",
"name": "Video slide",
"settings": [
{
"type": "header",
"content": "Background settings"
},
{
"type": "textarea",
"id": "video",
"label": "Video",
"default": "https://cdn.shopify.com/videos/c/o/v/fbb140fd46e3429eba459e1549dbbe38.mp4",
"info": "Allow multiple format, each video in a new line. MP4, MOV and WEBM supported."
},
{
"type": "image_picker",
"id": "mb_background",
"label": "Image on mobile",
"info": "600 x 480px recommended"
},
{
"type": "header",
"content": "Content"
},
{
"type": "checkbox",
"id": "content_in_container",
"label": "Content in container box",
"default": false
},
{
"type": "select",
"id": "content_position",
"label": "Content position",
"default": "center middle",
"options": [
{
"label": "Top left",
"value": "left top"
},
{
"label": "Top center",
"value": "center top"
},
{
"label": "Top right",
"value": "right top"
},
{
"label": "Middle left",
"value": "left middle"
},
{
"label": "Middle center",
"value": "center middle"
},
{
"label": "Middle right",
"value": "right middle"
},
{
"label": "Bottom left",
"value": "left bottom"
},
{
"label": "Bottom center",
"value": "center bottom"
},
{
"label": "Bottom right",
"value": "right bottom"
}
]
},
{
"type": "select",
"id": "text_alignment",
"label": "Content alignment",
"default": "center",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "select",
"id": "text_size",
"label": "Text size",
"default": "medium",
"options": [
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
]
},
{
"type": "select",
"id": "text_color",
"label": "Text color",
"default": "black",
"options": [
{
"value": "black",
"label": "Dark"
},
{
"value": "white",
"label": "Light"
}
]
},
{
"type": "textarea",
"id": "subheading",
"label": "Subheading",
"info": "Allow custom HTML"
},
{
"type": "textarea",
"id": "title",
"label": "Heading",
"default": "New Collection",
"info": "Allow custom HTML"
},
{
"type": "richtext",
"id": "description",
"label": "Description",
"default": "<p>Tell your campaign through images</p>"
},
{
"type": "url",
"id": "image_link",
"label": "Image link",
"info": "Link to image"
},
{
"type": "header",
"content": "Button"
},
{
"type": "text",
"id": "button_text",
"label": "Button label",
"default": "Shop now"
},
{
"type": "url",
"id": "button_link",
"label": "Button link"
},
{
"type": "select",
"id": "button_style",
"label": "Button style",
"options": [
{
"value": "m-button--primary",
"label": "Primary button"
},
{
"value": "m-button--secondary",
"label": "Secondary button"
},
{
"value": "m-button--white",
"label": "White button"
},
{
"value": "m-button--link",
"label": "Underline button"
}
],
"default": "m-button--primary"
},
{
"type": "select",
"id": "button_size",
"label": "Button size",
"options": [
{
"value": "m-button--small",
"label": "Button small"
},
{
"value": "",
"label": "Button medium"
},
{
"value": "m-button--large",
"label": "Button large"
}
],
"default": ""
},
{
"type": "header",
"content": "Footer"
},
{
"type": "checkbox",
"id": "show_footer",
"default": false,
"label": "Show footer"
},
{
"type": "select",
"id": "footer_alignment",
"label": "Footer alignment",
"options": [
{
"value": "start",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "end",
"label": "Right"
}
],
"default": "end"
},
{
"type": "text",
"id": "footer_text",
"label": "Footer text",
"default": "New Collection"
},
{
"type": "text",
"id": "footer_button",
"label": "Footer button",
"default": "Shop Now"
},
{
"type": "url",
"id": "footer_link",
"label": "Footer link"
}
]
}
],
"presets": [
{
"name": "Slideshow",
"category": "Image",
"blocks": [
{
"type": "slider_item"
},
{
"type": "slider_item"
},
{
"type": "slider_item"
}
]
}
]
}
{% endschema %}Editor is loading...
Leave a Comment