Owl 轮播：Javascript 无法加载。 Shopify 问题还是代码问题？

Question

正在尝试让我的 owl 轮播在 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 的问题。

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 之前添加了 owl 轮播。尝试

{{ '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(document).ready(function() {...

Answer 3

伙计，现在可以用了，去掉 JS

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

并将其放在 header 中的 jQuery 链接下，Shopify 已经有 JQuery，您不需要更多 Jquery，因为它会禁用轮播.所以你只需要 owl carousel js，shopify 会完成剩下的工作。我发现这很困难。

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

您将获得所需的结果。

这也是我提出的问题。

Shopify Carousels, Owl, slider, ResponsiveSlides

Answer 4

作为stated at the official Github page for Owl Carousel，发生这种情况是因为jQuery在库之后加载。

您只需等待 jQuery 加载即可。这样做：

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

一切都应该正常。

Owl 轮播：Javascript 无法加载。 Shopify 问题还是代码问题？

Owl Carousel: Javascript won't load. Shopify Issue or Code Issue?

javascript

css

jquery

shopify

owl-carousel