猫头鹰旋转木马：Javascript赢得'；不要装。Shopify问题还是代码问题？

试图让我的猫头鹰转盘在shopify为我工作。你能看一下我的代码，看看有没有什么不对劲的地方吗

我想我已经实现了它，但它似乎不会开火。任何建议都很好

CSS样式

{{ 'owl.theme.css' | asset_url | stylesheet_tag }}
{{ 'owl.carousel.css' | asset_url | stylesheet_tag }}

JS文件

{{ 'owl.carousel.js' | asset_url | script_tag }}
{{ 'jquery-1.9.1.min.js' | asset_url | script_tag }}

滑块HTML

{% if collection.handle contains "tee" %}

<script>
$(document).ready(function() {

$("#heroSlider").owlCarousel({

    navigation : true, // Show next and prev buttons
    slideSpeed : 300,
    paginationSpeed : 400,
    singleItem:true

    // "singleItem:true" is a shortcut for:
    // items : 1, 
    // itemsDesktop : false,
    // itemsDesktopSmall : false,
    // itemsTablet: false,
    // itemsMobile : false
});
});
 </script>

<div id="heroSlider" class="owl-carousel">
  <div class="item"><img src="https://cdn.shopify.com/s/files/1/0246/3225/files/2girlsinTSHIRT.jpg?2088744847513182869" /></div>
  <div class="item"><img src="https://cdn.shopify.com/s/files/1/0246/3225/files/2girlsinTSHIRT.jpg?2088744847513182869" /></div>
  <div class="item"><img src="https://cdn.shopify.com/s/files/1/0246/3225/files/2girlsinTSHIRT.jpg?2088744847513182869" /></div>
</div>


{% endif %}

---

我至少能看到这些图像。没有它们，它们就会消失

它看起来像是在jquery之前包含了owl转盘。试一试

{{ 'jquery-1.9.1.min.js' | asset_url | script_tag }}
{{ 'owl.carousel.js' | asset_url | script_tag }}

---

您在

jQuery.noConflict（）

中遇到问题。您正在调用它，然后尝试运行：

$(document).ready(function() {
  $("#heroSlider").owlCarousel({
    // ...
  });  
});

稍后，您将使用

$=jQuery还原
$
，但为时已晚

使用
jQuery（document）.ready（function（）{…
代替都德现在可以了，去掉JS

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

把它放在标题中的jQuery链接下，Shopify已经有了jQuery，你不需要更多的jQuery，因为它会禁用旋转木马。所以你只需要owl旋转木马js，其余的由Shopify完成。我好不容易才发现这一点

{{ 'owl.carousel.js' | asset_url | script_tag }}

你会得到你需要的结果

这也是我提出的问题

由于jQuery是在库之后加载的，所以会发生这种情况

您只需等待jQuery加载即可。按如下方式操作：

$(document).ready(function () {
    (function ($) {
        $('.owl-carousel').owlCarousel({
            ...
        });
    })(jQuery);
});

而且一切正常。
谢谢你的建议！不幸的是，这并没有解决问题。这似乎是jQuery的问题。当我加载两个版本的jQuery时，{{'jQuery-1.10.2.min.js'| asset|url | script|tag}和{{'jQuery-1.9.1.min.js asset|url | script tag}我可以看到堆叠的图像。删除一个或另一个，就会删除图像。@Alan你看到堆叠的图像可能是因为你破坏了JS并看到了默认css。这并不意味着你走对了方向。@Claytoneis一如既往，我感谢人们愿意给我的任何输入，但你错了。css隐藏了图像默认情况下，看到它们意味着JS正在按其应有的方式启动和删除该样式。如果您阅读了我上面的评论，我已经修复了该问题。仍然不知道为什么我需要两个版本的jQuery，但可能存在一些兼容性问题。这对我不起作用，此页面有部分帮助，而不是$（document）。ready（function（））{是否将其更改为：jQuery（document）.ready（function（）{…或$jQuery（document）.ready（function（））{…所以我不认为这是最佳实践..但是通过使用双jQuery链接并添加其中一个示例中的Javascript，我似乎有了运气的改变。不确定jQuery有什么问题，所以我将保留此选项，以防任何人对此发表评论。干杯！这很有意义，谢谢！我已经完成了您介绍的更改ced，在我知道这是更好的练习之前，它正在工作。
$(document).ready(function () {
    (function ($) {
        $('.owl-carousel').owlCarousel({
            ...
        });
    })(jQuery);
});