Carousel

Carousels are for displaying a related set of content items in a row. Items can be paged using the next/previous buttons or by a swipe gesture.

Interactive demo

For Banners

<div id="section-carousel2" class="carousel slide" data-bs-ride="carousel"> 
    <!-- Carousel Indicators -->
    <ol class="carousel-indicators">
      <li title="Show Slide 1" data-bs-target="#section-carousel2" data-bs-slide-to="0" class="active"></li>
      <li title="Show Slide 2" data-bs-target="#section-carousel2" data-bs-slide-to="1"></li>
      <li title="Show Slide 3" data-bs-target="#section-carousel2" data-bs-slide-to="2"></li>
      <!--   <li title="Show Slide 4" data-bs-target="#section-carousel" data-slide-to="3"></li>-->
    </ol>
    <div class="carousel-inner"> 
      <!-- Slide #1 -->
      <div class="carousel-item active">
        <div style="display: table-cell; height: 550px; width: 100vw; vertical-align: middle; background-color: #e2dfdb;">
          <h1>Judiciary Design System</h1>
          <p>SCJDS unites style, content and components with a single set of design principles. Whether you’re a developer or designer, you’ll get all the information and guidance you need.</p>
        </div>
      </div>
      <!-- Slide #2 -->
      <div class="carousel-item">
        <div style="display: table-cell; height: 550px; width: 100vw; vertical-align: middle; background-color: #e2dfdb;">
          <h1>Title of the slide</h1>
          <p>Short description</p>
        </div>
      </div>
      <!-- Slide #3 -->
      <div class="carousel-item">
        <div style="display: table-cell; height: 550px; width: 100vw; vertical-align: middle; background-color: #e2dfdb;">
          <h1>Title of the slide</h1>
          <p>Short description</p>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#section-carousel2" 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="#section-carousel2" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button>
  </div>