我想从轮播中更改这些指标
我尝试了下面的代码和许多其他代码,但没有一个有效。只是在圆角处做了一点改变。
.carousel-indicators li {
border-radius: 12px;
width: 12px;
height: 12px;
background-color: #404040;
}
<div class="container">
<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">
<img src="img/Background.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/Layer_4.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/Layer_5.png" class="d-block w-100" alt="...">
</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>
</div>
如果我理解正确的话,您想要更改列表项的项目符号吗?
您需要使用无序列表
<ul 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>
</ul>
然后将 CSS 更改为:
.carousel-indicators li {
list-style-type: circle;
}
我认为您可以通过更改上一个和下一个按钮内的跨度来控制它......例如。如果您想使用图标代替
从其内部的跨度中删除 class="carousel-control-next" 和 "carousel-control-prev"。
将图标放在具有这些类的 Span 的打开和关闭标记之间。
<button class="carousel-control-prev" type="button" data-bs-target="#testimonals" data-bs-slide="prev">
<span aria-hidden="true">
<i class="bi bi-arrow-left-circle-fill"></i>
</span>
<span class="visually-hidden">Previous</span>
</button>
<!-- next button -->
<button class="carousel-control-next" type="button" data-bs-target="#testimonals" data-bs-slide="next">
<span aria-hidden="true">
<i class="bi bi-arrow-right-circle-fill"></i>
</span>
<span class="visually-hidden">Next</span>
</button>
我认为您可以通过更改上一个和下一个按钮内的跨度来控制它......例如。如果您想使用图标代替
从其内部的跨度中删除 class="carousel-control-next" 和 "carousel-control-prev"。
将图标放在具有这些类的 Span 的打开和关闭标记之间。
<button class="carousel-control-prev" type="button" data-bs-target="#testimonals" data-bs-slide="prev">
<span aria-hidden="true">
<i class="bi bi-arrow-left-circle-fill"></i>
</span>
<span class="visually-hidden">Previous</span>
</button>
<!-- next button -->
<button class="carousel-control-next" type="button" data-bs-target="#testimonals" data-bs-slide="next">
<span aria-hidden="true">
<i class="bi bi-arrow-right-circle-fill"></i>
</span>
<span class="visually-hidden">Next</span>
</button>