Overview
Anim
Layout
Forms
Components
Accordion
Alerts
Avatar
Badge
Breadcrumb
Buttons
Button group
Close button
Calendar
Card
Caret
Carousel
Classified
Dropdowns
List
Loader
Modal
Navbar
Nav | Pills
Nav | Tabs
Pagination
Placeholders
Progress
Rating
Scrollbar
Sidenav
Spinners
Tables
Timeline
Toasts
Tooltips
TreeView
Utilities

Carousel

A slideshow component for cycling through elements—images or slides of text—like a Carousel.

UsageNg Carousel

Basic examples

Carousel allows to navigate through a collection of images in a sequential fashion, moving to the previous/next one through the arrows on the sides. 

    <div id="CarouselBasicExample" class="Carousel Slide Carousel-fade" data-ls-ride="Carousel">
      <!-- Indicators -->
      <div class="Carousel-indicators">
        <button type="button" class="Active" aria-current="true" aria-label="Slide 1"
                data-ls-target="#CarouselBasicExample" data-ls-slide-to="0"></button>
        <button type="button" aria-label="Slide 2"
                data-ls-target="#CarouselBasicExample" data-ls-slide-to="1"></button>
        <button type="button" aria-label="Slide 3"
                data-ls-target="#CarouselBasicExample" data-ls-slide-to="2"></button>
      </div>

      <!-- Inner -->
      <div class="Carousel-inner">
        <!-- Single item -->
        <div class="Carousel-item Active">
          <img class="D-block W-100" src="https://source.unsplash.com/random/962x400?image=0"  alt="Random 1"/>
          <div class="Carousel-caption D-none D-md-block">
            <h5>First slide label</h5>
            <p>Some representative placeholder content for the first slide.</p>
          </div>
        </div>

        <!-- Single item -->
        <div class="Carousel-item">
          <img class="D-block W-100" src="https://source.unsplash.com/random/962x400?image=1" alt="Random 2"/>
          <div class="Carousel-caption D-none D-md-block">
            <h5>Second slide label</h5>
            <p>Some representative placeholder content for the second slide.</p>
          </div>
        </div>

        <!-- Single item -->
        <div class="Carousel-item">
          <img class="D-block W-100" src="https://source.unsplash.com/random/962x400?image=2" alt="Random 3"/>
          <div class="Carousel-caption D-none D-md-block">
            <h5>Third slide label</h5>
            <p>Some representative placeholder content for the third slide.</p>
          </div>
        </div>
      </div>
      <!-- Inner -->

      <!-- Controls -->
      <button class="Carousel-control-prev" type="button" data-ls-target="#CarouselBasicExample" data-ls-slide="prev">
        <span class="Carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="Visually-hidden">Previous</span>
      </button>
      <button class="Carousel-control-next" type="button" data-ls-target="#CarouselBasicExample" data-ls-slide="next">
        <span class="Carousel-control-next-icon" aria-hidden="true"></span>
        <span class="Visually-hidden">Next</span>
      </button>
    </div>

Variations

Slides only

Here’s a Carousel with slides only. Note the presence of the .D-block and .W-100 on Carousel images to prevent browser default image alignment. 

  <div id="CarouselExampleSlidesOnly" class="Carousel Slide" data-ls-ride="Carousel">
    <div class="Carousel-inner">
      <div class="Carousel-item Active">
        <img class="D-block W-100" src="https://source.unsplash.com/random/962x400?image=0"  alt="Random 1"/>
      </div>
      <div class="Carousel-item">
        <img class="D-block W-100" src="https://source.unsplash.com/random/962x400?image=1"  alt="Random 2"/>
      </div>
      <div class="Carousel-item">
        <img class="D-block W-100" src="https://source.unsplash.com/random/962x400?image=2"  alt="Random 3"/>
      </div>
    </div>
  </div>
With controls

Adding in the previous and next controls: 

  <div id="CarouselExampleControls" class="Carousel Slide" data-ls-ride="Carousel">
    <div class="Carousel-inner">
      <div class="Carousel-item Active">
        <img class="D-block W-100" src="https://source.unsplash.com/random/962x400?image=0" alt="Random 1"/>
      </div>
      <div class="Carousel-item">
        <img class="D-block W-100" src="https://source.unsplash.com/random/962x400?image=1" alt="Random 2"/>
      </div>
      <div class="Carousel-item">
        <img class="D-block W-100" src="https://source.unsplash.com/random/962x400?image=2" alt="Random 3"/>
      </div>
    </div>
    <button class="Carousel-control-prev" type="button" data-ls-target="#CarouselExampleControls"
            data-ls-slide="prev">
      <span class="Carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="Visually-hidden">Previous</span>
    </button>
    <button class="Carousel-control-next" type="button" data-ls-target="#CarouselExampleControls"
            data-ls-slide="next">
      <span class="Carousel-control-next-icon" aria-hidden="true"></span>
      <span class="Visually-hidden">Next</span>
    </button>
  </div>
With indicators

You can also add the indicators to the Carousel, alongside the controls, too. 

    <div id="CarouselExampleIndicators" class="Carousel Slide" data-ls-ride="Carousel">
      <div class="Carousel-indicators">
        <button type="button" class="Active" aria-current="true" aria-label="Slide 1"
                data-ls-target="#CarouselExampleIndicators" data-ls-slide-to="0"></button>
        <button type="button" aria-label="Slide 2"
                data-ls-target="#CarouselExampleIndicators" data-ls-slide-to="1"></button>
        <button type="button" aria-label="Slide 3"
                data-ls-target="#CarouselExampleIndicators" data-ls-slide-to="2"></button>
      </div>
      <div class="Carousel-inner">
        <div class="Carousel-item Active">
          <img class="D-block W-100" src="https://source.unsplash.com/random/962x400?image=0" alt="Random 1"/>
        </div>
        <div class="Carousel-item">
          <img class="D-block W-100" src="https://source.unsplash.com/random/962x400?image=1" alt="Random 2"/>
        </div>
        <div class="Carousel-item">
          <img class="D-block W-100" src="https://source.unsplash.com/random/962x400?image=2" alt="Random 3"/>
        </div>
      </div>
      <button class="Carousel-control-prev" type="button"
              data-ls-target="#CarouselExampleIndicators" data-ls-slide="prev">
        <span class="Carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="Visually-hidden">Previous</span>
      </button>
      <button class="Carousel-control-next" type="button"
              data-ls-target="#CarouselExampleIndicators" data-ls-slide="next">
        <span class="Carousel-control-next-icon" aria-hidden="true"></span>
        <span class="Visually-hidden">Next</span>
      </button>
    </div>
With captions

Add captions to your slides easily with the .Carousel-caption element within any .Carousel-item. They can be easily hidden on smaller viewports, as shown below, with optional Display utilities. We hide them initially with .D-none and bring them back on medium-sized devices with .D-md-block. 

    <div id="CarouselExampleCaptions" class="Carousel Slide" data-ls-ride="Carousel">
      <div class="Carousel-indicators">
        <button type="button" class="Active" aria-current="true" aria-label="Slide 1"
                data-ls-target="#CarouselExampleCaptions" data-ls-slide-to="0"></button>
        <button type="button" aria-label="Slide 2"
                data-ls-target="#CarouselExampleCaptions" data-ls-slide-to="1"></button>
        <button type="button" aria-label="Slide 3"
                data-ls-target="#CarouselExampleCaptions" data-ls-slide-to="2"></button>
      </div>
      <div class="Carousel-inner">
        <div class="Carousel-item Active">
          <img class="D-block W-100" src="https://source.unsplash.com/random/962x400?image=0" alt="Random 1"/>
          <div class="Carousel-caption D-none D-md-block">
            <h5>First slide label</h5>
            <p>Some representative placeholder content for the first slide.</p>
          </div>
        </div>
        <div class="Carousel-item">
          <img class="D-block W-100" src="https://source.unsplash.com/random/962x400?image=1" alt="Random 2"/>
          <div class="Carousel-caption D-none D-md-block">
            <h5>Second slide label</h5>
            <p>Some representative placeholder content for the second slide.</p>
          </div>
        </div>
        <div class="Carousel-item">
          <img class="D-block W-100" src="https://source.unsplash.com/random/962x400?image=2" alt="Random 3"/>
          <div class="Carousel-caption D-none D-md-block">
            <h5>Third slide label</h5>
            <p>Some representative placeholder content for the third slide.</p>
          </div>
        </div>
      </div>
      <button class="Carousel-control-prev" type="button"
              data-ls-target="#CarouselExampleCaptions" data-ls-slide="prev">
        <span class="Carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="Visually-hidden">Previous</span>
      </button>
      <button class="Carousel-control-next" type="button"
              data-ls-target="#CarouselExampleCaptions" data-ls-slide="next">
        <span class="Carousel-control-next-icon" aria-hidden="true"></span>
        <span class="Visually-hidden">Next</span>
      </button>
    </div>
Crossfade

Use fade transition on your slides easily by adding the .Carousel-fade class to any .Carousel. 

    <div id="CarouselExampleCrossfade" class="Carousel Slide Carousel-fade" data-ls-ride="Carousel">
      <div class="Carousel-indicators">
        <button type="button" class="Active" aria-current="true" aria-label="Slide 1"
                data-ls-target="#CarouselExampleCrossfade" data-ls-slide-to="0"></button>
        <button type="button" aria-label="Slide 2"
                data-ls-target="#CarouselExampleCrossfade" data-ls-slide-to="1"></button>
        <button type="button" aria-label="Slide 3"
                data-ls-target="#CarouselExampleCrossfade" data-ls-slide-to="2"></button>
      </div>
      <div class="Carousel-inner">
        <div class="Carousel-item Active">
          <img class="D-block W-100" src="https://source.unsplash.com/random/962x400?image=0" alt="Random 1"/>
        </div>
        <div class="Carousel-item">
          <img class="D-block W-100" src="https://source.unsplash.com/random/962x400?image=1" alt="Random 2"/>
        </div>
        <div class="Carousel-item">
          <img class="D-block W-100" src="https://source.unsplash.com/random/962x400?image=2" alt="Random 3"/>
        </div>
      </div>
      <button class="Carousel-control-prev" type="button"
              data-ls-target="#CarouselExampleCrossfade" data-ls-slide="prev">
        <span class="Carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="Visually-hidden">Previous</span>
      </button>
      <button class="Carousel-control-next" type="button"
              data-ls-target="#CarouselExampleCrossfade" data-ls-slide="next">
        <span class="Carousel-control-next-icon" aria-hidden="true"></span>
        <span class="Visually-hidden">Next</span>
      </button>
    </div>
Material style

If you want to make your carousel look more "material" use the Rounded-* and Shadow-* classes to add rounded corners and a shadows. 

    <!-- Carousel wrapper -->
    <div id="carouselMaterialStyle" class="Carousel Slide Carousel-fade" data-ls-ride="Carousel">
      <!-- Indicators -->
      <div class="Carousel-indicators">
        <button type="button" class="Active" aria-current="true" aria-label="Slide 1"
                data-ls-target="#carouselMaterialStyle" data-ls-slide-to="0"></button>
        <button type="button" aria-label="Slide 2"
                data-ls-target="#carouselMaterialStyle" data-ls-slide-to="1"></button>
        <button type="button" aria-label="Slide 3"
                data-ls-target="#carouselMaterialStyle" data-ls-slide-to="2"></button>
      </div>
      <!-- Inner -->
      <div class="Carousel-inner Rounded Rounded-2 Shadow-3">
        <div class="Carousel-item Active">
          <img class="D-block W-100" src="https://source.unsplash.com/random/962x400?image=0" alt="Random 1"/>
          <div class="Carousel-caption D-none D-md-block">
            <h5>First slide label</h5>
            <p>Some representative placeholder content for the first slide.</p>
          </div>
        </div>
        <div class="Carousel-item">
          <img class="D-block W-100" src="https://source.unsplash.com/random/962x400?image=1" alt="Random 2"/>
          <div class="Carousel-caption D-none D-md-block">
            <h5>Second slide label</h5>
            <p>Some representative placeholder content for the second slide.</p>
          </div>
        </div>
        <div class="Carousel-item">
          <img class="D-block W-100" src="https://source.unsplash.com/random/962x400?image=2" alt="Random 3"/>
          <div class="Carousel-caption D-none D-md-block">
            <h5>Third slide label</h5>
            <p>Some representative placeholder content for the third slide.</p>
          </div>
        </div>
      </div>
      <!-- Controls -->
      <button class="Carousel-control-prev" type="button"
              data-ls-target="#carouselMaterialStyle" data-ls-slide="prev">
        <span class="Carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="Visually-hidden">Previous</span>
      </button>
      <button class="Carousel-control-next" type="button"
              data-ls-target="#carouselMaterialStyle" data-ls-slide="next">
        <span class="Carousel-control-next-icon" aria-hidden="true"></span>
        <span class="Visually-hidden">Next</span>
      </button>
    </div>
    <!-- Carousel wrapper -->
Dark variant

Add .Carousel-dark to the .Carousel for darker controls, indicators, and captions. 

    <div id="CarouselDarkVariant" class="Carousel Slide Carousel-fade Carousel-dark" data-ls-ride="Carousel">
      <div class="Carousel-indicators">
        <button type="button" class="Active" aria-current="true" aria-label="Slide 1"
                data-ls-target="#CarouselDarkVariant" data-ls-slide-to="0"></button>
        <button type="button" aria-label="Slide 2"
                data-ls-target="#CarouselDarkVariant" data-ls-slide-to="1"></button>
        <button type="button" aria-label="Slide 3"
                data-ls-target="#CarouselDarkVariant" data-ls-slide-to="2"></button>
      </div>
      <div class="Carousel-inner">
        <div class="Carousel-item Active">
          <img class="D-block W-100" src="https://source.unsplash.com/random/962x400?image=0" alt="Random 1"/>
          <div class="Carousel-caption D-none D-md-block">
            <h5>First slide label</h5>
            <p>Some representative placeholder content for the first slide.</p>
          </div>
        </div>
        <div class="Carousel-item">
          <img class="D-block W-100" src="https://source.unsplash.com/random/962x400?image=1" alt="Random 2"/>
          <div class="Carousel-caption D-none D-md-block">
            <h5>Second slide label</h5>
            <p>Some representative placeholder content for the second slide.</p>
          </div>
        </div>
        <div class="Carousel-item">
          <img class="D-block W-100" src="https://source.unsplash.com/random/962x400?image=2" alt="Random 3"/>
          <div class="Carousel-caption D-none D-md-block">
            <h5>Third slide label</h5>
            <p>Some representative placeholder content for the third slide.</p>
          </div>
        </div>
      </div>
      <button class="Carousel-control-prev" type="button"
              data-ls-target="#CarouselDarkVariant" data-ls-slide="prev">
        <span class="Carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="Visually-hidden">Previous</span>
      </button>
      <button class="Carousel-control-next" type="button"
              data-ls-target="#CarouselDarkVariant" data-ls-slide="next">
        <span class="Carousel-control-next-icon" aria-hidden="true"></span>
        <span class="Visually-hidden">Next</span>
      </button>
    </div>
Sass - Variables
$Carousel-transition-duration         : .6s !default;
$Carousel-transition                  :  transform $Carousel-transition-duration ease-in-out !default;

$Carousel-control-width               : 12% !default;
$Carousel-control-color               : $White !default;
$Carousel-control-opacity             : .5 !default;
$Carousel-control-hover-opacity       : .9 !default;
$Carousel-control-transition          : opacity .15s ease !default;

$Carousel-control-icon-width          : 2rem !default;
$Carousel-control-next-icon-bg        : "<svg xmlns='http://www.w3.org/2000/svg'><path fill='#{$Carousel-control-color}' d='M18.5,14.52,16.91,13l-1.58-1.57-.64-.63L12.24,8.33,4.76.94a2.91,2.91,0,0,0-4-.23,2.84,2.84,0,0,0,.23,4L8.43,12.1l2.45,2.42a.43.43,0,0,1,0,.63L8.43,17.57,1,25a2.83,2.83,0,0,0-.23,4,2.9,2.9,0,0,0,4-.23l7.48-7.39,2.45-2.42.64-.63,1.58-1.57,1.59-1.56A.43.43,0,0,0,18.5,14.52Z' /></svg>";
$Carousel-control-prev-icon-bg        : "<svg xmlns='http://www.w3.org/2000/svg'><path fill='#{$Carousel-control-color}' d='M.13,15.15l1.59,1.56,1.59,1.57.63.63,2.45,2.42,7.48,7.39a2.9,2.9,0,0,0,4,.23,2.82,2.82,0,0,0-.23-4L10.2,17.57,7.75,15.15a.45.45,0,0,1,0-.63L10.2,12.1l7.48-7.39a2.83,2.83,0,0,0,.23-4,2.91,2.91,0,0,0-4,.23L6.39,8.33,3.94,10.75l-.63.63L1.72,13,.13,14.52A.45.45,0,0,0,.13,15.15Z' /></svg>";

$Carousel-indicator-width             : 30px !default;
$Carousel-indicator-height            : 3px !default;
$Carousel-indicator-spacer            : 3px !default;
$Carousel-indicator-opacity           : .5 !default;
$Carousel-indicator-active-bg         : $White !default;
$Carousel-indicator-active-opacity    : 1 !default;
$Carousel-indicator-transition        : opacity .6s ease !default;
$Carousel-indicator-hit-area-height   : 10px !default;

$Carousel-caption-width               : 70% !default;
$Carousel-caption-spacer              : 1.25rem !default;
$Carousel-caption-color               : $White !default;
$Carousel-caption-padding-y           : 1.25rem !default;

$Carousel-dark-indicator-active-bg    :  $Black !default;
$Carousel-dark-caption-color          :  $Black !default;
$Carousel-dark-control-icon-filter    :  invert(1) grayscale(100) !default;