我正在尝试向我的项目添加照片轮播，但 Owl 轮播不会显示我的图像(src 绝对正确(，它显示整个容器，底部有导航点和上一个/下一个按钮，但不是我的图像。
将不胜感激任何帮助！
.html：
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="plugins/owl-carousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="plugins/owl-carousel/assets/owl.theme.default.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="owl-carousel owl-theme">
<div class="owl-item">
<img src="images/1.jpg">
</div>
<div class="owl-item">
<img src="images/9.jpg">
</div>
<div class="owl-item">
<img src="images/10.jpg">
</div>
<div class="owl-item">
<img src="images/11.jpg">
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="plugins//owl-carousel/owl.carousel.min.js"></script>
<script type="text/javascript">
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
autoPlay: 1000,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
});
</script>
</body>
我已经解决了我的问题。 显然，猫头鹰轮播在将页面设置为 rtl 时存在问题。
为了解决我的问题，我所要做的就是将rtl:true添加到jquery函数中。
感谢所有的帮手！
你能试试下面的代码吗
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
autoPlay: 1000,
items:10,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:10
}
}
});<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" media="screen">
<div class="container">
<div class="owl-carousel owl-theme">
<div class="item">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
</div>
<div class="item">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
</div>
<div class="item">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
</div>
<div class="item">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
</div>
<div class="item">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
</div>
<div class="item">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
</div>
<div class="item">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
</div>
<div class="item">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
</div>
<div class="item">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
</div>
<div class="item">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
</div>
<div class="item">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
</div>
<div class="item">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
</div>
<div class="item">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350">
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>你在脚本路径中使用了双/用这个改变它
<script src="plugins/owl-carousel/owl.carousel.min.js"></script>
请将类owl-item更改为除猫头鹰轮播默认关键字以外的其他自己名称，因为它会冲突。看