【做第二个轮播时，指示符小点不显示 _bottstrap 】

做第二个轮播时，指示符小点不显示

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(1)

bottstrap

详细描述

截图

代码

<div id="demo" class="carousel slide" data-ride="carousel">
 
  <!-- 指示符 -->
  	<ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
 	 </ul>
 
  <!-- 轮播图片 -->
  	<div class="carousel-inner">
    <div class="carousel-item active">
      <img class="img-fluid" src="backimage.png" alt="back">
      <div class="carousel-caption">	
    	<p>你作为一个初级菜鸟，你是否想要了解</p>
    	<h5><span class="text">50万</span>年薪的程序员，都会那些技能呢？</h5>
  		</div>
    </div>
<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">
			<div class="study">
				<p>优秀学员展示</p>
			</div>
	    	<div class="container text0">
			<div class="row">
			<div class="col-xs-12 col-sm-6 col-md-3 text-center">
				<img src="luo.png" alt="luo.png" class="avatar">
				<p class="text1">技术顾问：罗大佑</p>
				<p class="text2">百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理,负责技术研发、团队管理与建设。</p>
			</div>

编辑于2025-02-05

时间排序

热门排序

[北京|结业弟子]JS-张新
0

指示符是存在的，只是bootstrap默认指示符的样式是白色的，与你背景的颜色相同，所以导致看不见指示符。可以更改指示符的默认样式和颜色，来达到效果。

<ul class="carousel-indicators red">
<li data-target="#demo2" data-slide-to="0" class="active"></li>
<li data-target="#demo2" data-slide-to="1" class="active"></li>
<li data-target="#demo2" data-slide-to="2" class="active"></li>
</ul>
.carousel-indicators .active{
background-color:#29b078;
}
.carousel-indicators li{
width:10px;
height:10px;
border-radius: 50%;
}
希望可以理解

查看全部>

编辑于2018-09-01

去第页