Я устанавливаю миниатюру на свой слайдер по умолчанию в разделе слайд-шоу shopify дебютной темы slideshow.liquid, слайдер по умолчанию содержит точки, я хочу преобразовать его в миниатюры изображений, помогите.
Я настраиваю миниатюру на своем слайдере по умолчанию в разделе слайд-шоу shopify debut theme 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 -%}
{% 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 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 }}>
{% 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 %}
<noscript>
<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>
</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>