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-carousel" class="carousel slide" data-ride="carousel" data-interval="5000"> 
      <!-- Carousel Indicators -->
      <ol class="carousel-indicators">
        <li title="Show Slide 1" data-target="#section-carousel" data-slide-to="0" class="active"></li>
        <li title="Show Slide 2" data-target="#section-carousel" data-slide-to="1"></li>
        <li title="Show Slide 3" data-target="#section-carousel" data-slide-to="2"></li>
        <!--   <li title="Show Slide 4" data-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="btn btn-link carousel-control-prev" data-target="#section-carousel" data-slide="prev" title="Show Previous Slide"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </button>
      <button class="btn btn-link carousel-control-next" data-target="#section-carousel" data-slide="next" title="Show Next Slide"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </button>
    </div>