使用按钮在Shopify上更改产品图像

编程问答 2022-08-12

问题描述

我在shopify上的产品页面目前没有缩略图或堆叠图像来显示其他产品图片。我在产品的两边都有箭头，但是我似乎无法弄清楚如何使它们起作用以在产品图像之间移动并预览当前功能图像的位置。

 {%- for media in product.media -%}
     {%- assign featured = false -%}
     {%- if media == featured_media -%}
        {%- assign featured = true -%}
     {%- endif -%}

     <div id="main-prod" class="product-single__media-flex">
        {%- include 'media' with media,enable_image_zoom: enable_image_zoom,stacked: stacked,featured: featured,width: width,height: height -%}
              
    {%- if media == featured_media -%}
       <button title="PrevIoUs (Left arrow key)" type="button" class="mfp-arrow mfp-arrow-left mfp- 
        prevent-close">
        <span class="mfp-chevron mfp-chevron-left"></span> </button>
       <button title="Next (Right arrow key)" type="button" class="mfp-arrow mfp-arrow-right mfp- 
        prevent-close" >
        <span class="mfp-chevron mfp-chevron-right"></span> </button>
    {%- endif -%}
  {% endfor %}

我不确定要显示多少代码，但是我认为这是最重要的部分。有人建议使用滑块，但是我不知道如何将其合并到代码中。我认为我需要一个javascript函数才能浏览图像。非常感谢：）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascriptliquidproductshopify