[英]Owl Carousel: Javascript won't load. Shopify Issue or Code Issue?
试图让我的猫头鹰传送带在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之前包括猫头鹰轮播。 尝试
{{ '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;
,但为时已晚。
使用jQuery(document).ready(function() {...
代替
杜德现在可以使用了,摆脱了JS
{{ 'jquery-1.9.1.min.js' | asset_url | script_tag }}
并将其放在标题的jQuery链接下,Shopify已经有了JQuery,您不需要更多的Jquery,因为它将禁用轮播。 因此,您只需要猫头鹰轮播js,剩下的就由shopify完成。 我发现这很困难。
{{ 'owl.carousel.js' | asset_url | script_tag }}
您将获得所需的结果。
这也是我提出的问题。
如在Owl Carousel的Github官方页面上所述 ,这是因为jQuery是在库之后加载的。
您只需要等待jQuery加载即可。 像这样做:
$(document).ready(function () {
(function ($) {
$('.owl-carousel').owlCarousel({
...
});
})(jQuery);
});
一切都应该正常。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.