javascript - 猫头鹰轮播:不会加载JavaScript。 Shopify发行还是代码发行？

试图让我的猫头鹰传送带在shopify中为我工作。您能否看一下我的代码，看看是否有什么不满意的地方？

我想我已经在T上实现了它，但是它似乎不会触发。任何建议都会很棒！

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的问题。

When I have
  {{ 'jquery-1.10.2.min.js' | asset_url | script_tag }}
  {{ '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() {...代替