javascript - jquery Owl carousel: Javascript将不会加载 Shopify问题或者代码问题?

  显示原文与译文双语对照的内容
79 4

试图让我的猫头鹰 carousel 在shopify中为我工作。你能看看我的代码看看有什么 looks?

我想我已经实现了它,但它似乎不会激发。任何建议都是不错的 !

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 }}

slider 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 }}

我至少能看到图像。没有一个或者他们没有,他们消失了。

时间:原作者:0个回答

98 3

你的jQuery.noConflict() 有问题。你正在调用它,然后尝试运行:

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

稍后,你使用 $ = jQuery; 恢复 $,但为时已晚。

用户jQuery(document).ready(function() {...改为改为

原作者:
86 5

它看起来像在jquery之前包含 owl carousel 。try

{{ 'jquery-1.9.1.min.js' | asset_url | script_tag }}
{{ 'owl.carousel.js' | asset_url | script_tag }}
原作者:
...