Only Show 3 Carousel Indicators on Bootstrap 3 carousel - css

Question

I have Bootstrap 3 carousel on my page, there are more than 10 carousel slides, i want to display only 3 Indicators for the carousel because i dont want to show N number of Indicators because the slide images comes dynamically!!
After the Carousel crosses the 3rd slide (auto scroll/change enabled), the 3rd Indicator should remain active until the Carousel changes to the first slide. How to achieve this?

Answer 1

Supposing that the html of your carousel is the following
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<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>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="la.jpg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="chicago.jpg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="ny.jpg" alt="New york" style="width:100%;">
</div>
<div class="item">
<img src="ny.jpg" alt="New york" style="width:100%;">
</div>
<div class="item">
<img src="ny.jpg" alt="New york" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
here you have five slides and five indicators. For me, the easiest solution is a css solution (so, no js involved): you must simply add a class to the indicators that you want to hide, more precisely a class to the indicators that follow the last indicator that you want to make visible and a different class to the indicators that preceed the indicators that you want to hide, for example
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="not-visible-sx" 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>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li class="not-visible-dx" data-target="#myCarousel" data-slide-to="5"></li>
</ol>
and then use this css code
.not-visible-sx{
position: absolute;
top: 3px;
border: none;
}
.not-visible-dx{
position: absolute;
top: 3px;
border: none;
margin-left: -12px
}
(border:none is needed to have a better look of the indicators)
You'r simply hiding them behind the first and last "visible".