Vertically aligned indicators Bootstrap carousel

Question

By default, indicators are aligned horizontally at the bottom, respectively,

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="..." alt="..."> <div class="carousel-caption"> ... </div> </div> ... </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" 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-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> 

What is the best way to align the the indicators vertically, so that the indicators are always evenly distributed among the height of the image used within the carousel, with equal space to each indicator? I noticed that the height of the element with id carousel-example-generic changes based on the image used within the carousel due to a css property (which probably is at default) height: auto; .

Should I use a formula that looks something like:

Height of element with an id of carousel-example-generic / amount of indicators = height of indicator?

Should I use JavaScript in order to achieve what I ask here?

I want to achieve something like this JSFiddle , but I do not want to use a fixed height number for my indicators, I want them to always use the full space they can use within the carousel.

Edit: My guess is that the height of the indicators should be calculated with a formula which I show in the following JSFiddle .

Answer 1

First You Remove or comment Left and right controls

.carousel-indicators li{
display: block;
width: 10px;
height: 10px;
margin-bottom: 10px;
}

.carousel-indicators li display as 'inline-block' is change the 'block' Indicators show vertically

.carousel-indicators .active {
 width: 12px;
 height: 12px;
 margin-bottom: 10px;
 background-color: #fff;
}

Give space for Indicators so, set margin-bottom is 10px and active class also

.carousel-indicators{
 height: 350px;
 display: table-cell;
 vertical-align: middle;
 float: none;
 }

Indicators show the the middle in height set for your image size(slider)

Answer 2

You can use javascript to achieve the result.

You can read the height of the carousel and divide for the li element numbers.

  var carouselHeight = $("#carousel-example-generic").css("height");
  var elements = $("#carousel-example-generic li").length;
  var indicatorHeight = Math.floor(Number(carouselHeight.replace("px", "")) / elements);

  $("#carousel-example-generic .carousel-indicators li").css("height", indicatorHeight + "px");

I have made a simple JSFiddle