Question

我想将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>

Answer 1

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

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

Answer 2

我相信您应该为您在猫头鹰旋转木马上添加的每个项目添加类.item，因此结构适合猫头鹰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 个答案: