Owl Carousel: Javascript不加载.Shopify问题或代码问题

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

本文关键字：问题 Shopify 代码 加载 Carousel Javascript Owl      更新时间：2023-09-26

试着让我的猫头鹰旋转木马为我在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() {...代替

看起来你在jquery之前包含了owl carousel。试着

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

伙计，现在可以了，把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 Carousels, Owl, slider, responsivesslides

正如Owl Carousel的官方Github页面所述，发生这种情况是因为jQuery是在库之后加载的。

你只需要等待jQuery加载。这样做:

$(document).ready(function () {
    (function ($) {
        $('.owl-carousel').owlCarousel({
            ...
        });
    })(jQuery);
});
相关文章：