Carousel

A slideshow component for cycling through elements, like a carousel.

  1. Default
  2. Indicators-out

Default

By default, controls of carousel has white color. If you want to have a dark color for them, simply add .color-alt to the .carousel tag.


<div id="carousel1" class="carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel1" data-slide-to="1"></li>
    <li data-target="#carousel1" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="assets/img/placeholder-1900.png" alt="">
    </div>

    <div class="item">
      <img src="assets/img/placeholder-1900.png" alt="">
    </div>

    <div class="item">
      <img src="assets/img/placeholder-1900.png" alt="">
    </div>
    
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel1" role="button" data-slide="prev">
    <i class="fa fa-angle-left"></i>
  </a>
  <a class="right carousel-control" href="#carousel1" role="button" data-slide="next">
    <i class="fa fa-angle-right"></i>
  </a>
</div>

Indicators-out

It's just another style for carousel which can be achieved by just adding .indicators-out class.


<div id="carousel2" class="carousel slide indicators-out">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel2" data-slide-to="0" class="active"></li>
    <li data-target="#carousel2" data-slide-to="1"></li>
    <li data-target="#carousel2" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="assets/img/placeholder-1900.png" alt="">
    </div>

    <div class="item">
      <img src="assets/img/placeholder-1900.png" alt="">
    </div>

    <div class="item">
      <img src="assets/img/placeholder-1900.png" alt="">
    </div>
  </div>

</div>