View on GitHub

Carousel light

The light carousel is a modified version of Bootstrap’s default carousel, using lighter styles on all carousel controls.

On this page

Examples

html

<div id="carouselLightExample" class="carousel carousel-light slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselLightExample" data-bs-slide-to="0" class="active"></li>
    <li data-target="#carouselLightExample" data-bs-slide-to="1"></li>
    <li data-target="#carouselLightExample" data-bs-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img src="..." class="d-block img-fluid" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block img-fluid" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block img-fluid" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselLightExample" role="button" data-bs-slide="prev">
    <span class="icon icon-chevron-thin-left" aria-hidden="true">〈</span>
    <span class="visually-hidden">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselLightExample" role="button" data-bs-slide="next">
    <span class="icon icon-chevron-thin-right" aria-hidden="true">〉</span>
    <span class="visually-hidden">Next</span>
  </a>
</div>

CSS

Sass variables

$carousel-light-control-color:          rgba($black, .3);

$carousel-light-indicator-color:        rgba($black, .3);
$carousel-light-indicator-color-active: $white;
$carousel-light-indicator-border-color: $primary;