gpt4 book ai didi

javascript - Owl Carousel : Javascript won't load. Shopify 问题或代码问题?

转载 作者:太空宇宙 更新时间:2023-11-04 02:54:43 24 4
gpt4 key购买 nike

试图让我的 Owl Carousel 在 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 }}

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

我至少可以看到图像。没有一个或另一个,它们就会消失。

最佳答案

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

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

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

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

关于javascript - Owl Carousel : Javascript won't load. Shopify 问题或代码问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32359498/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com