我在让 Owl Carousel 插件在我的项目中工作时遇到问题。
出于测试目的，我创建了一个新项目，只是为了看看是否可以让轮播仅在页面上工作。
我认为我已按照 https://owlcarousel2.github.io/OwlCarousel2/docs/started-installation.html 上的说明进行操作一步一步来。
我已将以下文件添加到我的项目文件夹中:
- owl.carousel.min.js
- jquery.min.js
- jquery.js
- owl.carousel.min.css
- owl.theme.default.min.css
jquery.js文件是JavaScript调用函数。
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 5
}
}})
这是我的index.html 文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="owl/owl.carousel.min.css">
<link rel="stylesheet" href="owl/owl.theme.default.min.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="owl-carousel owl-theme">
<div class="item">
<h4>1</h4>
</div>
<div class="item">
<h4>2</h4>
</div>
<div class="item">
<h4>3</h4>
</div>
<div class="item">
<h4>4</h4>
</div>
<div class="item">
<h4>5</h4>
</div>
<div class="item">
<h4>6</h4>
</div>
<div class="item">
<h4>7</h4>
</div>
<div class="item">
<h4>8</h4>
</div>
<div class="item">
<h4>9</h4>
</div>
<div class="item">
<h4>10</h4>
</div>
<div class="item">
<h4>11</h4>
</div>
<div class="item">
<h4>12</h4>
</div>
</div>
<script src="jquery.js"></script>
<script src="owl/jquery.min.js"></script>
<script src="owl/owl.carousel.min.js"></script>
</body>
</html>我目前的页面上根本不会出现注释。
显然我遗漏或忘记了一些东西，但由于这是我第一次尝试将 Owl Carousel 实现到我的项目中，因此我的经验很少。
希望你们中的一些人可以向我解释我哪里出错了。
提前致谢，如果重复，抱歉!
最佳答案
我真的不明白你的问题是什么，但我已经尝试过你的代码，并且认为只是脚本的位置。您将 Owl Carousel 功能放在 Jquery(库)和 Owl Carousel(插件)之上。调用owlCarousel的函数需要被解释，因此为了逻辑推进Owl Carousel插件必须位于Owl Carousel函数之上。
<script src="jquery.js"></script> <!-- here the problem -->
<script src="owl/jquery.min.js"></script>
<script src="owl/owl.carousel.min.js"></script>
<!-- you need put owlCarousel before juery and owl.carousel -->
正确的是:
<script src="owl/jquery.min.js"></script>
<script src="owl/owl.carousel.min.js"></script>
<script src="jquery.js"></script>
希望这对您有帮助! :)
关于javascript - Owl Carousel 根本不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52875421/