Question

我正在尝试在shopify上的产品页面上实现Slick JS。它的工作效果很好，除了只有一个可以滚动的产品图像，它会显示三个可以滚动的图像。有没有什么办法解决这一问题？我已经包含了代码和正在发生的事情的图片。这是我在 product-template.liquid ：

中的代码

   <script type='text/javascript' src='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js'></script>
 <script type='text/javascript'>
     $(function(){
       $('div.adsurf_slickslide_container').slick({
         dots: true,
         infinite: true,
         speed: 300,
         slidesToShow: 1,
         adaptiveHeight: true
       });

       $(document).on('change', 'select.single-option-selector', function(){
         var customVal = $(this).val();

         var hittedIndex = $('span img#' + customVal).data('index');
         console.log('span img[addata=' + customVal + ']');

         if(hittedIndex != undefined)
             $('div.adsurf_slickslide_container').slick('slickGoTo', hittedIndex);
       });
     });   </script>



      <div class="grid product-single">
     <div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %}
 product-single__photos--full{% endif %}">
       {%- assign featured_image = product.selected_or_first_available_variant.featured_image | default:
 product.featured_image -%}
       {% for image in product.images %}
         {% capture img_id %}FeaturedImage-{{ section.id }}-{{ image.id }}{% endcapture %}
         {% capture img_class %}product-featured-img{% endcapture %}
         {% capture zoom_img_id %}FeaturedImageZoom-{{ section.id }}-{{ image.id }}{% endcapture %}
         {% capture img_wrapper_id %}{{ zoom_img_id }}-wrapper{% endcapture %}
         {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

         {% include 'image-style' with small_style: true, width: height, height: height, wrapper_id: img_wrapper_id, img_id: img_id %}

      <div class="adsurf_slickslide_container" role='toolbar'>
             {% assign index = 0 %}
             {% if product.images.size > 1 %}
               {% for image in product.images %}
                   {% assign index = index | plus: 1 %}

             <span class="slide" data-index="{{ index }}" data-variant-img="{{ image.id }}">
               <img data-advar="{{ product.options_with_values | escape  }}" src="{{ image | img_url: '1024x1024' }}" alt="{{ image.alt |
 escape }}">
             </span>

       {% endfor %}
     {% endif %}
         </div>
       {% endfor %}

picture 谢谢，莱恩

Answer 1

您的滑块尚未启动，至少从您的图片没有启动。

请使用开发者工具（在Win上为Ctrl + F12，在Mac上为Cmd + Alt + C）。选择“控制台选项卡”。在此处粘贴其内容，以便我们了解您的JS中发生了什么。

请重新插入可读的代码？

检查他们的网站并查找“重新初始化”和“可变宽度”。

$('.variable-width').slick({
  infinite: true,
  variableWidth: true
});

将Slick JS实施到Shopify

1 个答案: