如何在 Shopify 中制作产品图片幻灯片？答案

【问题标题】：How to make product image slideshows in Shopify?如何在 Shopify 中制作产品图片幻灯片？
【发布时间】：2015-10-03 05:38:10
【问题描述】：

我正在开发 Shopify 网站，我需要创建几个图像幻灯片（仅适用于移动版式）：

(1) 一个用于产品集合

(2) 一个用于产品页面本身的产品缩略图

有人知道如何完成吗？谢谢。

【问题讨论】：

标签： slideshow carousel shopify product

【解决方案1】：

您将需要查看图像循环：https://docs.shopify.com/themes/liquid-documentation/objects/image

Nb - 对于分配给产品变体的图像，您可以执行以下操作：

   {% for image in product.images %}
      <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
   {% endfor %}

那么您需要确保您的 JS / jQuery pugin 环绕该 html。对于集合图像 - 您也可以这样做，但输出集合中的图像。

    {% for product in collection.products %}
       <img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
     {% endfor %}

对于任何很酷的东西，您都需要 JavaScript。 Liquid 本身只是呈现 html - 你需要 JavaScript 来制作像炫酷的幻灯片这样的东西。因此，如果您熟悉 jQuery 插件 - 您只需让 shopify 输出所需的 html 即可使用该插件。

你看过木材吗？这是一个很好的起点：http://shopify.github.io/Timber/

【讨论】：

【解决方案2】：

尝试安装此应用：https://apps.shopify.com/product-images-gallery-slider

您可以通过在滑块、图库或轮播中进行选择来更改产品图像的呈现方式。

【讨论】：