Use slide class to set carousel with slides. Note the presence of the d-block and w-100 class on carousel images to prevent browser default image alignment.

<!-- Slides Only -->
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000">
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item carousel-item-next carousel-item-start">
            <img class="d-block img-fluid mx-auto" src="..." alt="First slide">
        </div>
        <div class="carousel-item">
            <img class="d-block img-fluid mx-auto" src="..." alt="Second slide">
        </div>
        <div class="carousel-item active carousel-item-start">
            <img class="d-block img-fluid mx-auto" src="..." alt="Third slide">
        </div>
    </div>
</div>

Use carousel-control-prev and carousel-control-next class with <button> or <a> tag element to show carousel with control navigation.

Previous Next

<!-- With Controls -->
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
        <img class="d-block img-fluid mx-auto" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
        <img class="d-block img-fluid mx-auto" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
        <img class="d-block img-fluid mx-auto" src="..." alt="Third slide">
    </div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
</a>
</div>

Use carousel-indicators class with <ol> element to show carousel with indicators.

Previous Next

<!-- With Indicators -->
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class=""></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" class=""></li>
    <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" class="active" aria-current="true"></li>
</ol>
<div class="carousel-inner" role="listbox">
    <div class="carousel-item">
        <img class="d-block img-fluid mx-auto" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
        <img class="d-block img-fluid mx-auto" src="..." alt="Second slide">
    </div>
    <div class="carousel-item active">
        <img class="d-block img-fluid mx-auto" src="..." alt="Third slide">
    </div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
</a>
</div>

Use carousel-caption class to add captions to the carousel.

Sunrise above a beach

You've probably heard that opposites attract. The same is true for fonts. Don't be afraid to combine font styles that are different but complementary.

Working from home little spot

Consistency piques people’s interest is that it has become more and more popular over the years, which is excellent.

Dramatic clouds at the Golden Gate Bridge

Increase or decrease the letter spacing depending on the situation and try, try again until it looks right, and each letter.

Previous Next

<!-- With Captions -->
<div id="carouselExampleCaption" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" role="listbox">
    <div class="carousel-item">
        <img src="..." alt="" class="d-block img-fluid mx-auto">
        <div class="carousel-caption d-none d-md-block text-white-50">
            <h5 class="text-white">Sunrise above a beach</h5>
            <p>You've probably heard that opposites attract. The same is true for fonts. Don't be afraid to combine font styles that are different but complementary.</p>
        </div>
    </div>
    <div class="carousel-item active">
        <img src="..." alt="" class="d-block img-fluid mx-auto">
        <div class="carousel-caption d-none d-md-block text-white-50">
            <h5 class="text-white">Working from home little spot</h5>
            <p>Consistency piques people’s interest is that it has become more and more popular over the years, which is excellent.</p>
        </div>
    </div>
    <div class="carousel-item">
        <img src="..." alt="" class="d-block img-fluid mx-auto">
        <div class="carousel-caption d-none d-md-block text-white-50">
            <h5 class="text-white">Dramatic clouds at the Golden Gate Bridge</h5>
            <p>Increase or decrease the letter spacing depending on the situation and try, try again until it looks right, and each letter.</p>
        </div>
    </div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaption" role="button" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaption" role="button" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
</a>
</div>

Use carousel-fade class to the carousel to animate slides with a fade transition instead of a slide.

Previous Next

<!-- With Crossfade Animation -->
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-bs-target="#carouselExampleFade" data-bs-slide-to="0" class="active"></li>
        <li data-bs-target="#carouselExampleFade" data-bs-slide-to="1"></li>
        <li data-bs-target="#carouselExampleFade" data-bs-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block img-fluid mx-auto" src="..." alt="First slide">
        </div>
        <div class="carousel-item">
            <img class="d-block img-fluid mx-auto" src="..." alt="Second slide">
        </div>
        <div class="carousel-item">
            <img class="d-block img-fluid mx-auto" src="..." alt="Third slide">
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </a>
</div>

Use data-bs-interval=" " to a carousel-item to change the amount of time to delay between automatically cycling to the next item.

Previous Next

<!-- Individual Slide -->
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
  <div class="carousel-item active" data-bs-interval="10000">
    <img src="..." class="d-block w-100" alt="...">
  </div>
  <div class="carousel-item" data-bs-interval="2000">
    <img src="..." class="d-block w-100" alt="...">
  </div>
  <div class="carousel-item">
    <img src="..." class="d-block w-100" alt="...">
  </div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-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-bs-target="#carouselExampleInterval" data-bs-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Next</span>
</button>
</div>

Carousels support swiping left/right on touchscreen devices to move between slides. This can be disabled using the data-bs-touch attribute. The example below also does not include the data-bs-ride attribute and has data-bs-interval="false" so it doesn’t autoplay.

Previous Next

<!-- Disable Touch Swiping -->
<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false" data-bs-interval="false">
<div class="carousel-inner">
  <div class="carousel-item active">
    <img src="..." class="d-block w-100" alt="...">
  </div>
  <div class="carousel-item">
    <img src="..." class="d-block w-100" alt="...">
  </div>
  <div class="carousel-item">
    <img src="..." class="d-block w-100" alt="...">
  </div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-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-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Next</span>
</button>
</div>

Use carousel-dark class to the carousel for darker controls, indicators, and captions.

Drawing a sketch

Too much or too little spacing, as in the example below, can make things unpleasant for the reader.

Blue clock on a pastel background

In some designs, you might adjust your tracking to create a certain artistic effect asked them what graphic design tips they live.

Working at a coffee shop

A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring.

Previous Next

<!-- Dark Variant -->
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
  <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
  <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
  <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
  <div class="carousel-item active" data-bs-interval="10000">
    <img src="..." class="d-block w-100" alt="...">
    <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" data-bs-interval="2000">
    <img src="..." class="d-block w-100" alt="...">
    <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 src="..." class="d-block w-100" alt="...">
    <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-bs-target="#carouselExampleDark" data-bs-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-bs-target="#carouselExampleDark" data-bs-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Next</span>
</button>
</div>