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

两者都是一样的，第二个只是缩小版本的库。所以摆脱其中一个。

然后尝试让我知道您的问题是否已解决。此致