我在shopify首次亮相主题slideshow.liquid部分中将缩略图设置为默认滑块，默认滑块带有点，我想将其转换为`缩略图图像，请帮忙。
我在shopify首次亮相主题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>
答案 0 :(得分：0)
首先，您需要访问主题HTML / CSS。转到在线商店>主题>操作>编辑代码。
然后，滚动到Assets文件夹并选择 theme.js 文件。
如果使用的是Mac，请使用cmd + F按钮进行搜索： _setActiveThumbnail（）;
在此正下方的新行上添加以下内容： _initThumbnailSlider（）;
在此之前的几行中，查找 _initBreakpoints：function（）函数。在其中，注释掉第一个if语句。然后，在unmatch：function（）内部再往下一点，在那里也注释掉if语句。 完成后，它应该看起来像这样：
下一步，转到“部分”区域并打开 product-template.liquid 文件
使用 thumbnails-wrapper 类来查找 。这是上一个/下一个箭头所在的位置，当前它们被设置为仅在移动设备上显示。
从这两个按钮中删除中等水平隐藏类：
现在，我们向两个按钮之间的
最后，转到“资产”部分的 theme.scss.liquid 文件，并将以下CSS添加到文件底部：
或访问此URL中的代码，CSS也位于此处：http://snippet.easimpt.com/topic/details/130
谢谢。