Tabler

Source code Sponsor

Last updates

Example 1
Change deprecated html tags to text decoration classes (#29604)
Example 2
justify-content:between ⇒ justify-content:space-between (#29734)
Example 3
Update change-version.js (#29736)
Example 4
Regenerate package-lock.json (#29730)
Paweł Kuna
UI Designer
Set status Profile & account Feedback
Settings Logout

Documentation

Carousel

Bootstrap documentation

A carousel is used to display multiple pieces of visual content without taking up too much space. Carousels eliminate the need to scroll down the page to see all content and are a popular method of displaying marketing information.

Default markup

Use a carousel to make your website design more visually appealing for users. In the default carousel design, respective elements slide automatically and users can go to the next slide by clicking an arrow.

<div id="carousel-sample" class="carousel slide" data-bs-ride="carousel">
  <ol class="carousel-indicators">
    <li data-bs-target="#carousel-sample" data-bs-slide-to="0" class="active"></li>
    <li data-bs-target="#carousel-sample" data-bs-slide-to="1" class=""></li>
    <li data-bs-target="#carousel-sample" data-bs-slide-to="2" class=""></li>
    <li data-bs-target="#carousel-sample" data-bs-slide-to="3" class=""></li>
    <li data-bs-target="#carousel-sample" data-bs-slide-to="4" class=""></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" alt="" src="...">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="" src="...">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="" src="...">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="" src="...">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" alt="" src="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carousel-sample" 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="#carousel-sample" role="button" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </a>
</div>