如何将拇指图像作为单独的幻灯片图像获取？

Question

我在移动设备中使用 Brooklyn Shopify 主题，主要特色图片在一张幻灯片中，所有缩略图都在一张幻灯片中，但现在我希望每个缩略图图像都像特色图片一样作为单个幻灯片放映图片。

Answer 1

您可以使用一些 CSS 技巧和重复获取图像来做到这一点。

在 Product.liquid 文件中复制获取的代码图像，因为您说您正在使用 Brooklyn 主题，我会帮助您。

查找此代码

<div class="grid product-single">
    <div class="grid__item large--seven-twelfths medium--seven-twelfths text-center">
      <div class="product-single__photos">
        {% assign featured_image = current_variant.featured_image | default: product.featured_image %}

        {% comment %}
          Display current variant image, or default first
        {% endcomment %}
        <div class="feature_image top_feature_image">
         <div class="product-single__photo-wrapper">
          <img class="product-single__photo" id="ProductPhotoImg" src="{{ featured_image | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ featured_image | img_url: 'grande' }}"{% endif %} alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}">
        </div>
        </div>

        {% comment %}
          Display rest of product images, not repeating the featured one
        {% endcomment %}
         <div class="thumb_images">
           {% for image in product.images | limit:4 %}
            <div class="product-single__photo-wrapper">
              <img class="product-single__photo" src="{{ image.src | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %} alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}">
            </div>
        {% endfor %}
        </div>

      </div>
    </div>

然后替换为

<div class="grid product-single">
    <div class="grid__item large--seven-twelfths medium--seven-twelfths text-center">
      <div class="product-single__photos">
        {% assign featured_image = current_variant.featured_image | default: product.featured_image %}

        {% comment %}
          Display current variant image, or default first
        {% endcomment %}
        <div class="feature_image top_feature_image">
         <div class="product-single__photo-wrapper">
          <img class="product-single__photo" id="ProductPhotoImg" src="{{ featured_image | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ featured_image | img_url: 'grande' }}"{% endif %} alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}">
        </div>
        </div>

        {% comment %}
          Display rest of product images, not repeating the featured one
        {% endcomment %}

        {% for image in product.images | limit:3 %}
            <div class="product-single__photo-wrapper desk">
              <img class="product-single__photo" src="{{ image.src | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %} alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}">
            </div>
        {% endfor %}
         <div class="thumb_images">
           {% for image in product.images | limit:4 %}
            <div class="product-single__photo-wrapper">
              <img class="product-single__photo" src="{{ image.src | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %} alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}">
            </div>
        {% endfor %}
        </div>

      </div>
    </div>

现在打开 theme.scss.liquid 文件并为桌面添加这个

.desk {
  display: none;
}

.desk是我的习惯class

并在移动样式中添加此内容，即 767px。

.product-single__photo-wrapper.desk {
  display: block;
}
  .thumb_images {
  display: none !important;
}
  .slick-dots > li:last-child, .slick-dots > li:nth-last-child(2) {
  display: none;
}

这将解决您的需求。

如何将拇指图像作为单独的幻灯片图像获取？

How to get thumb images as individual slide images?

shopify