我无法显示轮播指标。我认为这与我在每个“幻灯片”中使用巨型电子秤和容器等有关。也许是因为指示器是白色的,所以我看不到它们-在这种情况下,我该如何使指示器向上移动一点或将灰色框向下移动一点,以使白色指示器位于灰色顶部?我已经花了数小时试图修复它,但是我对HMTL / CSS / JS等还不是很熟悉,所以显然缺少一些东西!非常感谢您的帮助。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<section class="jumbotron text-center">
<div class="container">
<h1 class="display-4">Slide 1</h1>
<p class="lead text-muted">Sample sentence 1</p>
</div>
</section>
</div>
<div class="carousel-item">
<section class="jumbotron text-center">
<div class="container">
<h1 class="display-4">Slide 2</h1>
<p class="lead text-muted">Sample sentence 2</p>
</div>
</section>
</div>
<div class="carousel-item">
<section class="jumbotron text-center">
<div class="container">
<h1 class="display-4">Slide 3</h1>
<p class="lead text-muted">Sample sentence 3</p>
</div>
</section>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
我更改了一些CSS以便清楚地查看指标。您可以检查一下。
.carousel-control-next-icon, .carousel-control-prev-icon {
display: inline-block;
width: 20px;
height: 20px;
background: no-repeat 50%/100% 100%;
background-color: #686161 !important;
border-radius: 100%;
box-shadow: 0px 0px 7px 2px #000000a1;
background-size: initial !important;
}
.carousel .jumbotron {
margin-bottom: unset;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<section class="jumbotron text-center">
<div class="container">
<h1 class="display-4">Slide 1</h1>
<p class="lead text-muted">Sample sentence 1</p>
</div>
</section>
</div>
<div class="carousel-item">
<section class="jumbotron text-center">
<div class="container">
<h1 class="display-4">Slide 2</h1>
<p class="lead text-muted">Sample sentence 2</p>
</div>
</section>
</div>
<div class="carousel-item">
<section class="jumbotron text-center">
<div class="container">
<h1 class="display-4">Slide 3</h1>
<p class="lead text-muted">Sample sentence 3</p>
</div>
</section>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
指示器的颜色为白色,与背景相同。更改ol
的颜色后,指示器就会显示出来。
<ol class="carousel-indicators" style="background-color: Tomato;">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators" style="background-color: Tomato;">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<section class="jumbotron text-center">
<div class="container">
<h1 class="display-4">Slide 1</h1>
<p class="lead text-muted">Sample sentence 1</p>
</div>
</section>
</div>
<div class="carousel-item">
<section class="jumbotron text-center">
<div class="container">
<h1 class="display-4">Slide 2</h1>
<p class="lead text-muted">Sample sentence 2</p>
</div>
</section>
</div>
<div class="carousel-item">
<section class="jumbotron text-center">
<div class="container">
<h1 class="display-4">Slide 3</h1>
<p class="lead text-muted">Sample sentence 3</p>
</div>
</section>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>