我的猫头鹰旋转木马不工作
我的猫头鹰旋转木马不工作
提问于 2017-02-03 00:19:32
我尝试了下面给出的代码，但图像显示在列表视图中。在这里，我尝试更改所有内容，比如添加循环的jquery代码，但都不起作用。
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="OwlCarousel2-2.2.0/dist/assets/owl.carousel.min.css">
<link rel="stylesheet" href="OwlCarousel2-2.2.0/dist/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="owl-carousel sliderImgs owl-loaded">
<div class="item"><img src="images/1.jpg"></div>
<div class="item"><img src="images/2.jpg"></div>
<div class="item"><img src="images/3.jpg"></div>
<div class="item"><img src="images/4.jpg"></div>
<div class="item"><img src="images/5.jpg"></div>
<div class="item"><img src="images/6.jpg"></div>
<div class="owl-controls">
<div class="owl-nav">
<div class="owl-prev">prev</div>
<div class="owl-next">next</div>
</div>
<div class="owl-dots">
<div class="owl-dot active"><span></span></div>
<div class="owl-dot"><span></span></div>
<div class="owl-dot"><span></span></div>
</div>
</div>
</div>
<script src="jquery/jquery-3.1.1.min.js"></script>
<script src="OwlCarousel2-2.2.0/dist/owl.carousel.min.js"></script>
</body>
</html>这是js文件。
<script type="text/javascript">
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
});
});
</script>这是css文件
img
{
/*display: block;*/
height: 50%;
width: 50%;
}如有任何建议，我们将不胜感激。谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-02-03 03:24:44
按照这个特定的顺序加载资源(参见底部的工作示例)：
<head>中的
assets/owl.carousel.min.cssassets/owl.theme.default.min.css
<body>中的
- 放置一个
<div>，其中包含类owl-carousel和owl-theme以及您选择的任何其他自定义类，您希望在其中显示您的传送带。任何其他特定的轮播类不应该被添加(即owl-loaded)。此div中的 - 放置包含图像的
<div>s，如下例所示，不包含类item(它将由旋转木马添加)。如果您需要自定义类来设计特定幻灯片的样式，但不需要特定于owl的类，则可以添加自定义类。
不要放置任何其他轮播特定的标记(如上一个/下一个按钮或项目符号)。它们将根据您的初始化options.
jquery.min.js(确保它加载并且路径是correct)
owl.carousel.min.js(从/dist文件夹，确保它加载)
- 您自己的
<script>(包含对初始化的调用)来添加它们。
重要方面：
必须按此顺序加载
- 5、6和7。它们可以放在3和4之前，甚至可以包含在
<head>标记中。但是，如果您将它们放在<body>中的折叠下方，您的页面加载速度似乎会更快。 - 如果你在
<body>中加载1和2，使用<style>标签，这是不推荐的，如果它们被放在carousel标记之后，在解析CSS之前，一些浏览器可能会渲染一个快速的无样式版本的carousel。这就是为什么在所有JavaScript<script>标签(jQuery是一个JavaScript库)上将它们加载到<head>. - Place
type="text/javascript"中更好的原因。
工作示例：
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">
<div class="owl-carousel owl-theme">
<div><img src="https://i.picsum.photos/id/237/400/300.jpg"></div>
<div><img src="https://i.picsum.photos/id/238/400/300.jpg"></div>
<div><img src="https://i.picsum.photos/id/239/400/300.jpg"></div>
<div><img src="https://i.picsum.photos/id/240/400/300.jpg"></div>
<div><img src="https://i.picsum.photos/id/241/400/300.jpg"></div>
<div><img src="https://i.picsum.photos/id/242/400/300.jpg"></div>
<div><img src="https://i.picsum.photos/id/243/400/300.jpg"></div>
<div><img src="https://i.picsum.photos/id/244/400/300.jpg"></div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<script type="text/javascript">
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
});
</script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42007194
复制相关文章
相似问题
腾讯云开发者
