Question

我正在Shopify网站上工作，我需要制作一些图片幻灯片（仅适用于移动设备）：

（1）产品系列之一

（2）一个用于产品页面本身的产品缩略图

任何人都知道如何完成任务？感谢。

Answer 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。对于Collection图像 - 您也可以这样做，但输出集合中的图像。

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

对于任何酷的东西，你都需要JavaScript。液体本身只是渲染HTML - 你需要JavaScript才能制作像幻灯片幻灯片这样的东西。因此，如果您熟悉jQuery插件，那么您只需将shopify输出所需的html与插件一起使用即可。

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

Answer 2

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

您可以通过选择滑块，图库或轮播来更改产品图像的显示效果。

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

2 个答案: