CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Nandhini Kajol
Nandhini Kajol

Reputation: 95

Only Show 3 Carousel Indicators on Bootstrap 3 carousel

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?

Upvotes: 0

Views: 1825

Answers (1)

marco_autiero
marco_autiero

Reputation: 51

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".

Upvotes: 1

Related Questions