owlcarousel - 没有出现点
19 javascript css owl-carousel
我正在研究一个项目,因为我在javascript中的知识非常有限,我决定使用owlcarousel.一切都很好,但现在我遇到了问题.
我将点设置为true但它们没有出现.到目前为止我的工作如下:
.container {
width: 90%;
margin: 0 auto;
}
/*Text over image*/
.item {
width: 100%;
}
.item img {
display: block;
max-width:100%;
}
/*Carousel Nav Buttons*/
.carousel-nav-left{
height: 30px;
font-size: 30px;
position: absolute;
top: 0%;
bottom: 0%;
margin: auto 0;
margin-left: -40px;
}
.carousel-nav-right{
height: 30px;
font-size: 30px;
position: absolute;
top: 0%;
bottom: 0%;
right: 0%;
margin: auto 0;
margin-right: -40px;
}
@media (max-width: 700px) {
.carousel-nav-left{
margin-left: -30px;
}
.carousel-nav-right{
margin-right: -30px;
}
.container {
width: 85%;
}
}
@media (max-width: 410px) {
.carousel-nav-left{
margin-left: -25px;
}
.carousel-nav-right{
margin-right: -25px;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>owlcarousel</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<div class="carousel">
<div class="item">
<img src="http://placehold.it/350x250" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/350x250" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/350x250" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/350x250" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/350x250" alt="" />
</div>
<div class="item">
<img src="http://placehold.it/350x250" alt="" />
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<script>
(function($){
$('.carousel').owlCarousel({
items: 4,
loop:true,
margin:10,
nav:true,
navText: ["<span class='carousel-nav-left'><i class='fa fa-chevron-left'></i></span>","<span class='carousel-nav-right'><i class='fa fa-chevron-right'></i></span>"],
dots: true,
paginationSpeed: 300,
rewindSpeed: 400,
responsive:{
0:{
items:1
},
490:{
items:2
},
770:{
items:3
},
1200:{
items:4
},
1500:{
items:5
}
}
})
})(jQuery);
</script>
</body>
</html>请让我知道如何解决这个问题
Toj*_*cko 43
在我的网页上第一次使用猫头鹰滑块时,我也遇到了同样的问题.我看不到点导航,我心里想,这可能是一个错误,并决定做一些调查.
我后来发现需要包含2个css文件.一个是own-carousel.min.css另一个是owl.theme.default.min.css.在此之后,容器div应该在其类列表中具有owl-carousel和owl-theme类.例如:
<div id="slider" class="owl-carousel owl-theme">
<img src="/dist/assets/img1.jpg" />
<img src="/dist/assets/img2.jpg" />
<img src="/dist/assets/img3.jpg" />
<img src="/dist/assets/img4.jpg" />
</div>
希望这对以后遇到此问题的人有所帮助.
- TY，你救救我 (2认同)
Dan*_*ney 14
确保您已包含所有必要的资源:
- jQuery的2.1.1.min.js
- owl.carousel.min.js
- owl.carousel.min.css
另外,请确保您的CSS包含相应的owl-page和owl-controls
以下是重要CSS代码的一个示例:
.owl-theme .owl-controls .owl-page {
display: inline-block;
}
.owl-theme .owl-controls .owl-page span {
background: none repeat scroll 0 0 #869791;
border-radius: 20px;
display: block;
height: 12px;
margin: 5px 7px;
opacity: 0.5;
width: 12px;
}
正如在这个JSFiddle中看到的那样.
请注意,如果dots: true从JSFiddle代码中删除(并运行它),则仍会显示分页"点".但是,如果删除上面的CSS,则不会显示这些点.
- 请检查其他答案并添加此部分.`主要容器上的类owl-carousel和owl-theme是出现点的必要条件.` (4认同)
关键是
owl-theme您的代码中缺少类！
包含 CSS 和 JS 资源
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
设置您的 HTML
<div class="owl-carousel owl-theme">
<div> Content 1 </div>
<div> Content 2</div>
<div> Content 3</div>
<div> Content 4</div>
<div> Content 5</div>
<div> Content 6</div>
<div> Content 7</div>
</div>
注意：如果您不将
owl-theme类包含在父类中，Div则不会向您显示点。因此，有必要使它们对最终用户可见。
调用插件
现在调用 Owl 初始化函数，你的轮播就准备好了。
$(function(){
$(".owl-carousel").owlCarousel();
});
演示：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<div class="owl-carousel owl-theme">
<div> Content 1 </div>
<div> Content 2</div>
<div> Content 3</div>
<div> Content 4</div>
<div> Content 5</div>
<div> Content 6</div>
<div> Content 7</div>
</div>
| 归档时间： |
|
| 查看次数： |
42688 次 |
| 最近记录： |