"样式化引导轮播指示器"
[英]Styling bootstrap carousel indicators
问题描述
我试图让默认的引导轮播指示器成为非常细的黄线，卡在底部，如下所示。
我让它们位于页面底部，但我似乎无法将它们更改为矩形或更改它们的颜色。
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
.carousel-indicators {
margin: 0px;
height: 0px;
}
.carousel-indicators ol {
width: 100%;
}
.carousel-indicators li {
height: 3px !important;
border-radius: 0px !important;
width: 25%;
}
4 个解决方案
解决方案1
10 已采纳 2016-10-08 20:50:50
像这样的东西？ 请注意，宽度并不完全准确，因为我只做了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>
解决方案2
2 2018-07-31 09:56:56
伟大的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;
}
解决方案3
0 2019-02-27 01:27:54
我刚为自己编写了类似的代码，我认为它会对你有所帮助。 通过使用Flex布局，您可以类似地拉伸指示器而不必担心它们的宽度flex-grow：1; 做这个工作
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>
解决方案4
0 2022-02-01 23:44:31
此代码段更改库react-bootstrap的prev 和 next Carousel 图标控件：
& span.carousel-control-prev-icon, & span.carousel-control-next-icon{
background-color: black;
}
是的，只有背景。 图标本身是一个 xml 图像，因此无法找到更改颜色的方法。 ：/
将自举轮播指标设置为点
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.