Question

我在移动设备中使用Brooklyn 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是我采用的自定义类

以移动方式，即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;
}

这将解决您的要求。

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

1 个答案: