貓頭鷹輪播：不會加載JavaScript。 Shopify發行還是代碼發行？

Question

試圖讓我的貓頭鷹傳送帶在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 }}

我至少可以看到這些圖像。 沒有一個或另一個，他們就消失了。

Answer 1

看起來您在jQuery之前包括貓頭鷹輪播。 嘗試

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

Answer 2

您在使用jQuery.noConflict()遇到問題。 您正在調用它，然后嘗試運行：

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

稍后，您將使用$ = jQuery;恢復$ $ = jQuery; ，但為時已晚。

使用jQuery(document).ready(function() {...代替

Answer 3

杜德現在可以使用了，擺脫了JS

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

並將其放在標題的jQuery鏈接下，Shopify已經有了JQuery，您不需要更多的Jquery，因為它將禁用輪播。 因此，您只需要貓頭鷹輪播js，剩下的就由shopify完成。 我發現這很困難。

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

您將獲得所需的結果。

這也是我提出的問題。

Shopify輪播，貓頭鷹，滑塊，響應幻燈片

Answer 4

如在Owl Carousel的Github官方頁面上所述 ，這是因為jQuery是在庫之后加載的。

您只需要等待jQuery加載即可。 像這樣做：

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

一切都應該正常。