1

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

<!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>
4

3 回答 3

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>
于 2017-03-03T01:16:59.267 回答
0

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

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

于 2014-09-11T15:22:55.270 回答
0

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

于 2015-05-03T10:43:51.530 回答