如何获得拇指图像作为个人幻灯片图像？

Question

我在手机上使用布鲁克林Shopify主题--主要的特征图像是单张幻灯片，所有的拇指都在一张幻灯片中，但是现在我希望每个拇指图像都是单一幻灯片图像，就像特写图像一样。

Answer 1

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

在Product.liquid文件中，复制您所说的正在使用布鲁克林主题的代码图像，我将帮助您处理相同的问题。

查找此代码

<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是我自定义的类

在移动风格，即767 ie添加这一点。

.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;
}

这将解决你的需求。