我的猫头鹰旋转木马坏了

我尝试了下面给出的代码，但图像显示在列表视图中。在这里，我尝试过更改所有内容，比如添加循环的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%;
}

如有任何建议，我们将不胜感激。感谢

按此特定顺序加载资源(请参阅底部的工作示例)：

在<head>中

assets/owl.carousel.min.css
assets/owl.theme.default.min.css

在<body>中

将具有类owl-carousel和owl-theme的<div>以及您选择的任何其他自定义类放置在您希望显示转盘的位置。任何其他特定的转盘类都不应添加(即owl-loaded)
在这个div中放置包含图像的<div>s，就像下面的例子一样，没有item类(它将由转盘添加)。如果您需要自定义类来设置特定幻灯片的样式，但不需要owl特定的类，则可以添加这些类
不要放置任何其他转盘特定的标记(如上一个/下一个按钮或项目符号)。它们将由转盘根据您的初始化选项添加
jquery.min.js(确保其加载并且路径正确)
owl.carousel.min.js(从/dist文件夹，确保已加载)
您自己的<script>，包含对初始化的调用

重要方面：

5、6和7必须按此顺序加载。它们可以放在3和4之前，甚至可以包含在<head>标签中。但是，如果您将它们放在<body>中的折叠下方，您的页面加载速度似乎会更快。实际上，它将加载完全相同的内容，但加载页面时呈现的可见元素将在加载5、6和7之后加载，因此加载速度似乎较慢
如果使用<style>标记在<body>中加载1和2(这是不推荐的)，并且如果它们被放置在carousel标记之后，那么在解析CSS之前，一些浏览器可能会呈现carousel的快速无样式版本。这就是为什么最好将它们加载到<head>中
将type="text/javascript"放置在所有JavaScript<script>标签上(jQuery是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>

相关内容

最新更新

热门标签：