猫头鹰旋转木马未加载答案

【问题标题】：Owl Carousel Not Loading猫头鹰旋转木马未加载
【发布时间】：2014-09-11 15:12:42
【问题描述】：

我想将 Owl 轮播添加到我的网页，但它没有加载，浏览器控制台中也没有错误消息。为什么轮播不加载？？

<!DOCTYPE html> 

 <html>
<head>
<link rel= "stylesheet" type="text/css" href="CSS_Header.css"/>

<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="assets/owl.carousel.css"/>

<!-- Default Theme -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
</head>
<body>

<!--  jQuery 1.7+  -->
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>


<!-- Include js plugin -->
<script src="owl.carousel.js"></script>
<script src="owl.carousel.min.js"></script>

<div id="Items" class="owl-carousel">
  <div><img src="slide1.png"/></div>
  <div><img src="slide1.png"/></div>
  <div><img src="slide1.png"/></div>

<script type="text/css">
  $(document).ready(function() { 
    $("#Items").owlCarousel();

});
</script>

</div>

</body>
</html>

【问题讨论】：

为什么要导入owl.carousel.js 和owl.carousel.min.js？第二个应该是第一个的缩小版..
即使我删除它，它仍然不起作用
从@Ninsly 回答中获取建议 - 如果您仍然遇到问题，请尝试创建一个小提琴供我们查看jsfiddle。

标签： jquery jquery-plugins owl-carousel

【解决方案1】：

我认为您应该为添加到 owl carousel 上的每个项目添加 class .item，因此该结构适合 owl-corousel 识别。

<div id="Items" class="owl-carousel">
  <div class="item"><img src="slide1.png"/></div>
  <div class="item"><img src="slide1.png"/></div>
  <div class="item"><img src="slide1.png"/></div>

<script type="text/css">
  $(document).ready(function() { 
    $("#Items").owlCarousel();

});
</script>

</div>

【讨论】：

【解决方案2】：

您在标记为<script type="text/css"> 的标记中包含javascript。尝试将其更改为<script type="text/javascript">。

另外，我建议将您的脚本放入您的<head>。将脚本放在要操作的元素中并不是一个好主意。

【讨论】：

感谢它现在可以工作，但我无法为轮播添加任何功能，如自动播放它给了我一个错误的意外令牌}
好吧，我修复了错误，但幻灯片仍然没有“自动播放”

【解决方案3】：

尝试使用早期版本的 jQuery，例如 jquery-1.9.1.min.js

【讨论】：