有没有办法将Ken Wheeler/Slick JS实现到我的shopify？

我使用“debut”作为shopify的店铺主题。我想使用Slick JS作为我的产品库的图片幻灯片。我试过了，它工作！但“选择变体并显示它的图像”的功能已经消失。有没有办法将Ken Wheeler/Slick JS实现到我的shopify？

这是我里面产品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>

请帮助。在此先感谢:)

来源

2017-01-25 Jeremy Talanay

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

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

删除此行

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

和你的主题应能正常工作。

亲切的问候

来源

2017-01-25 20:02:18

有没有办法将Ken Wheeler/Slick JS实现到我的shopify？

回答

相关问题