Html 样式引导轮播指示器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39937072/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Styling bootstrap carousel indicators
提问by cosmichero2025
Hello I'm trying to get the default bootstrap carousel indicators to be very thin yellow lines stuck att he bottom as shown below.
您好，我正在尝试使默认的引导程序轮播指示器成为非常细的黄线，卡在底部，如下所示。
https://gyazo.com/43b9bdbcb63dde3f5fe9b982d4b96b37
https://gyazo.com/43b9bdbcb63dde3f5fe9b982d4b96b37
I got them to be at the bottom of the page but I can't seem to change them into rectangles or change their color.
我让它们位于页面底部，但我似乎无法将它们更改为矩形或更改它们的颜色。
HTML
HTML
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
CSS
CSS
.carousel-indicators {
margin: 0px;
height: 0px;
}
.carousel-indicators ol {
width: 100%;
}
.carousel-indicators li{
height: 3px !important;
border-radius: 0px !important;
width: 25%;
}
回答by Roope
Something like this? Note that the width is not totally accurate because I just made it 33%.
像这样的东西？请注意，宽度并不完全准确，因为我刚刚将其设为 33%。
.item img {
width: 100%;
height: auto
}
.carousel {
position: relative;
width: 200px;
height: 100px;
}
ol.carousel-indicators {
position: absolute;
bottom: 0;
margin: 0;
left: 0;
right: 0;
width: auto;
}
ol.carousel-indicators li,
ol.carousel-indicators li.active {
float: left;
width: 33%;
height: 10px;
margin: 0;
border-radius: 0;
border: 0;
background: transparent;
}
ol.carousel-indicators li.active {
background: yellow;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/200x100" alt="Slide 1">
<div class="carousel-caption">
Slide 1
</div>
</div>
<div class="item">
<img src="http://placehold.it/200x100" alt="Slide 2">
<div class="carousel-caption">
Slide 2
</div>
</div>
<div class="item">
<img src="http://placehold.it/200x100" alt="Slide 3">
<div class="carousel-caption">
Slide 3
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>回答by Jossey Ogbuanoh
Great css! I played with it to come up with ball indicators in half-white and the active indicator in yellow.
很棒的css！我用它来想出半白色的球指示器和黄色的活动指示器。
ol.carousel-indicators {
position: absolute;
bottom: 5px;
margin: 0;
left: 0;
right: 0;
width: auto;
}
ol.carousel-indicators li,
ol.carousel-indicators li.active {
width: 1rem;
height: 1rem;
margin: 0;
border-radius: 50%;
border: 0;
background: transparent;
}
ol.carousel-indicators li {
background: rgba(255,255,255,0.39);
margin-left: .5rem;
margin-right: .5rem;
}
ol.carousel-indicators li.active {
background: yellow;
}
回答by David Ophiuchus
i have just wrote similar code for myself, i think it will help you a little bit more. by using Flex layout you can similarly stretch indicators without worrying about their width flex-grow:1; makes this job
我刚刚为自己编写了类似的代码，我认为它会对您有所帮助。通过使用 Flex 布局，您可以类似地拉伸指示器而无需担心它们的宽度 flex-grow:1；做这份工作
https://codepen.io/ophiuch/pen/Jzowbo
https://codepen.io/ophiuch/pen/Jzowbo
.carousel /*slider */
{
position: relative;
}
.carousel .carousel-indicators /* indicator wrapper*/
{
position: absolute;
bottom: 0;
left:0px;
width: 100%;
margin: 0;
left: 0;
right: 0;
width: 100%;
display: flex; /* this is for indicators */
}
#headcarousel_container .carousel-indicators li /* indicators*/
{
flex-grow: 1; /* make all indicator li similarly stretched */
height: 40px;
border-radius: 2px;
}
#headcarousel_container .carousel-indicators li.active
{
background-color:rgba(251,222,87,0.5) ;/* changes indicators color when it is active*/
}
.carousel .carousel-inner .item img
{
width: 100%;
height: 100vh;
object-fit: cover;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<!--slider -->
<div class="container-fluid" id="headcarousel_container" style="padding: 0;">
<div id="headcarouselid" class="carousel slide" data-ride="carousel">
<!-- indicators -->
<ul class="carousel-indicators">
<li class="active" data-target="#headcarouselid" data-slide-to="0"></li>
<li class="" data-target="#headcarouselid" data-slide-to="1"></li>
<li class="" data-target="#headcarouselid" data-slide-to="2"></li>
<li class="" data-target="#headcarouselid" data-slide-to="3"></li>
<li class="" data-target="#headcarouselid" data-slide-to="4"></li>
</ul>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569_960_720.jpg" title="slidepicture" alt="slidepicture">
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2014/07/28/20/39/landscape-404072_960_720.jpg" title="slidepicture" alt="slidepicture">
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2018/08/23/07/35/thunderstorm-3625405_960_720.jpg" title="slidepicture" alt="slidepicture">
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2017/09/08/20/29/chess-2730034_960_720.jpg" title="slidepicture" alt="slidepicture">
</div>
<div class="item">
<img src="https://cdn.pixabay.com/photo/2018/05/30/15/31/rustic-3441673_960_720.jpg" title="slidepicture" alt="slidepicture">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control left" href="#headcarouselid" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#headcarouselid" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</body>
</html>