Owl Carousel: Javascript无法加载。购物问题还是代码问题？
Owl Carousel: Javascript无法加载。购物问题还是代码问题？
提问于 2015-09-03 01:25:01
试着让我的猫头鹰旋转木马在shopify里为我工作。你能看看我的代码，看看有没有什么不对劲的地方？
我想我已经实现了它的to 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 }}我至少可以看到图像。没有一个或另一个，它们就消失了。
回答 4
Stack Overflow用户
回答已采纳
发布于 2015-09-03 05:55:38
你和jQuery.noConflict()有点问题。你正在调用它，然后试图运行：
$(document).ready(function() {
$("#heroSlider").owlCarousel({
// ...
});
});稍后，您将使用$ = jQuery;恢复$，但为时已晚。
请改用jQuery(document).ready(function() {...
Stack Overflow用户
发布于 2015-09-03 01:43:01
看起来你在jquery之前包含了owl carousel。试一试
{{ 'jquery-1.9.1.min.js' | asset_url | script_tag }}
{{ 'owl.carousel.js' | asset_url | script_tag }}Stack Overflow用户
发布于 2016-09-12 19:39:35
伙计，现在可以用了，去掉JS
{{ 'jquery-1.9.1.min.js' | asset_url | script_tag }}并把它放在标题中的jQuery链接下，Shopify已经有了JQuery，你不需要更多的Jquery，因为它会禁用carousel。所以你只需要owl carousel js，剩下的shopify就完成了。我费了好大劲才发现这一点。
{{ 'owl.carousel.js' | asset_url | script_tag }}你会得到你想要的结果。
这也是我提出的问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32359498
复制相关文章
相似问题