Shopify 图像滑块复制图像答案

【问题标题】：Shopify Image slider duplicating imagesShopify 图像滑块复制图像
【发布时间】：2018-07-13 22:39:06
【问题描述】：

我目前是 shopify 的新手，并且正在使用免费的主题电话 saleshunter。在产品页面本身，滑块上的缩略图是重复的。你能帮我解决这个问题吗？这是我为产品图片找到的代码。

<div class="{{ product_image_width }}">
				<div class="product-single__images">
					<div class="product-single__photos slick-slider manual-init" id="ProductPhoto">
						{% for image in product.images %}
							<div class="product-single__photos__item">
								{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
								<img src="{{ image.src | img_url: product_image_size }}" alt="{{ image.alt | escape }}">
							</div>
						{% endfor %}
					</div>

					{% if product.images.size > 1 %}
						<div class="product-single__thumbnails slick-slider manual-init" id="ProductThumbs">
							{% for image in product.images %}
								{% for variant in image.variants %}
									<div class="product-single__thumbnails__item" {% if image.attached_to_variant? %} data-variant="{{ variant.id }}" {% endif %}
										 data-index="{{ image.position }}">
										<img src="{{ image.src | img_url: product_thumb_size }}"
											 alt="{{ image.alt | escape }}">
									</div>
								{% else %}
									<div class="product-single__thumbnails__item">
										<img src="{{ image.src | img_url: product_thumb_size }}"
											 alt="{{ image.alt | escape }}">
									</div>
								{% endfor %}
							{% endfor %}

						</div>
					{% endif %}
				</div>
			</div>

【问题讨论】：

标签： shopify

【解决方案1】：

无论出于何种原因，图像缩略图会根据您拥有的变体（即红色衬衫、蓝色衬衫和黑色衬衫的小号、中号、大号）重复。这意味着您将拥有 3 件一件颜色的衬衫。为防止这种情况发生，请删除此代码：

{% for variant in image.variants %}
      <div class="product-single__thumbnails__item" {% if image.attached_to_variant? %} data-variant="{{ variant.id }}" {% endif %}
                                     data-index="{{ image.position }}">
             <img src="{{ image.src | img_url: product_thumb_size }}"
                         alt="{{ image.alt | escape }}">
      </div>
{% else %}

以及此代码之后的 {% endfor %} 之一：

<div class="product-single__thumbnails__item">
        <img src="{{ image.src | img_url: product_thumb_size }}"
                 alt="{{ image.alt | escape }}">
</div>

【讨论】：