有沒有辦法將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？

回答

相關問題