Shopify的product.liquid中的滑塊圖像

Question

我正在使用flexslider.js，但是在刪除圖像變體時出現了錯誤。 這是shopify的product.liquid的以下代碼。 如何在flexslider中解決此問題？

    <script src="//cdn.shopify.com/s/files/1/2149/4693/t/7/assets/jquery-1.11.2.min.js?18364480765274061922" type="text/javascript"></script>
{{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' | script_tag }}
{{ 'jquery.flexslider.js' | asset_url | script_tag }}
{{ 'jquery.flexslider-min.js' | asset_url | script_tag }}
<script>
       $(window).load(function() {
        $('#carousel').flexslider({
          animation: "slide",
          controlNav: false,
          animationLoop: false,
          slideshow: false,
          itemWidth: 130,
          itemMargin: 5,
          item:3,
          asNavFor: '#slider'
        });

        $('#slider').flexslider({
          animation: "slide",
          controlNav: false,
          animationLoop: false,
          slideshow: false,
          sync: "#carousel"
        });
      });
</script>

Answer 1

看來您已經兩次添加了jQuery庫。

<script src="//cdn.shopify.com/s/files/1/2149/4693/t/7/assets/jquery-1.11.2.min.js?18364480765274061922" type="text/javascript"></script> {{ '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' | script_tag }}

如果在頁面中多次加載jQuery，可能會產生沖突，並且腳本可能無法正常工作。 jquery-1.11.2.min.js和jquery.min.js是同一件事，只是版本不同。

shopify主題也可能已經包含了jquery。 如果有，則無需再添加。

在下一行中，我可以看到您嘗試兩次加載flexslider插件。

{{ 'jquery.flexslider.js' | asset_url | script_tag }} {{ 'jquery.flexslider-min.js' | asset_url | script_tag }}

兩者都是同一件事，第二個只是庫的縮小版本。 因此，擺脫其中之一。

然后嘗試讓我知道您的問題是否解決。 問候