owlcarousel - 不出现圆点答案

【问题标题】：owlcarousel - dots do not appearowlcarousel - 不出现圆点
【发布时间】：2023-12-22 15:52:01
【问题描述】：

我正在做一个项目，由于我对 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>

请告诉我如何解决此问题

【问题讨论】：

嗨，这是住在某个地方吗？一个链接真的可以帮助我们进行调查。谢谢
How come dots/navigation buttons are not visiable using owlcarousel?的可能重复

标签： javascript css owl-carousel

【解决方案1】：

第一次在我的网页上使用 Owl 滑块时，我也遇到了同样的问题。我看不到点导航，我心想这可能是一个错误，并决定进行一些调查。

后来我发现需要包含 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>

希望这对以后遇到此问题的人有所帮助。

【讨论】：

【解决方案2】：

主容器上的 owl-carousel 和 owl-theme 类是点出现所必需的。

【讨论】：

【解决方案3】：

确保您已包含所有必要的资源：

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;
}

如This JSFiddle 所示。

请注意，如果您从 JSFiddle 代码中删除 dots: true（并运行它），分页“点”仍会显示。但是，如果您删除上述 CSS，则不会显示点。

其他答案

由于这是公认的答案，我将添加由@Kevin Vincendeau 提供并由@Amr Ibrahim 在cmets 中引起注意的另一个潜在修复。

检查以确保您的 HTML 包含所有必要的类。比如主容器上的owl-carousel和owl-theme。

【讨论】：

请检查其他答案并添加此部分。 ` 主容器上的 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>

注意：如果您没有在父 Div 中包含 owl-theme 类，那么 Dots 不会出现在您面前。所以有必要让它们可见到结束用户。

调用插件

现在调用 Owl 初始化函数，您的轮播已准备就绪。

$(function(){
  $(".owl-carousel").owlCarousel();
});

演示：

$(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>
    
<!-- Set up your 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>

【讨论】：

【解决方案5】：

根据 Owl Carousel 文档，您必须调用下面的 2 个 CSS 文件（在 head 标签内）：

<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">

然后在footer tag附近，调用JQuery和Owl Carousel JS脚本：

<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>

我在我的代码中遇到了同样的问题，然后我只是清空所有 owl 和 jquery 文件，阅读 owl 文档，按照安装过程一步一步进行。现在它对我来说很好用。

【讨论】：

【解决方案6】：

请注意，猫头鹰轮播点只有在您有足够的物品时才会显示。

例如，如果您同时显示 3 个项目，则只有在该轮播中有 4 个或更多项目时才会显示圆点。

【讨论】：

【解决方案7】：

添加 css 对我有用！

    .owl-dots .owl-dot span {
        width: 10px;
        height: 10px;
        margin: 5px 7px;
        background: #D6D6D6;
        display: block;
        -webkit-backface-visibility: visible;
        transition: opacity .2s ease;
        border-radius: 30px;
    }
    
    .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
        background: #869791;
    }

【讨论】：

【解决方案8】：

$(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>
    
<!-- Set up your 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>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案9】：

 $(document).ready(function() {
        $('.owl-carousel').owlCarousel({
            loop: true,
            autoplayTimeout: 2000,
            autoplayHoverPause: true,
            dots: false,
            margin: 5,
            nav: true,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 3
                },
                1000: {
                    items: 4
                }
            }
        })
    });

尝试：点：假，

【讨论】：