有什么方法可以在我的 shopify 中实现 Ken Wheeler/Slick JS？答案

【问题标题】：Is there any way to implement Ken Wheeler/Slick JS to my shopify?有什么方法可以在我的 shopify 中实现 Ken Wheeler/Slick JS？
【发布时间】：2017-01-25 08:08:16
【问题描述】：

我在 shopify 中使用“Debut”作为我商店的主题。我想使用 Slick JS 作为我的产品库的图片幻灯片。我试过了，它工作！但是“选择变体并显示它的图像”的功能已经消失了。

这是我在 product-template.liquid 中的代码：

<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>


  <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
  <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>

请帮忙。在此先感谢:)

【问题讨论】：

标签： javascript jquery ruby shopify slick.js

【解决方案1】：

Shopify 首次亮相的主题会加载已经包含 jQuery 的 vendor.js。

我可以看到你再次加载了 jQuery。这是我猜的问题。

删除这一行

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

您的主题应该可以正常工作。

亲切的问候

【讨论】：