Skip links and keyboard navigation

SWE components

Carousel

Overview

A slideshow component for cycling through elements—images or slides of text—like a carousel. The carousel component allows you to feature multiple pieces of content in an allocated amount of space.

Default

If there is a requirement to have multiple carousels on the same page, then please increment ID value at root and in the controls to scope each carousel. For more details please refer to the Bootstrap 4 carousel documentation (Opens in new window) .

View example in Storybook

Code

<div class="qg-featured">
  <div id="carousel-1" class="carousel slide" data-ride="carousel" data-interval="8000">
    <div class="carousel-inner">
      <div class="carousel-item active" title="title">
        <a href="https://qld.gov.au/">
          <img src="https://via.placeholder.com/920x572/808080/808080" alt="placeholder">
          <div class="carousel-caption">
            <h3>lorem ipsum </h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci atque, ea fuga iste
              quia? Accusantium doloribus dolorum, eius in iure, iusto odit officiis praesentium rem,
              rerum similique velit voluptatum.</p>
          </div>
        </a>
      </div>
      <div class="carousel-item">
        <a href="https://qld.gov.au/" title="title">
          <img src="https://via.placeholder.com/920x572/000/000" alt="placeholder">
          <div class="carousel-caption">
            <h3>lorem ipsum </h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci atque, ea fuga iste
              quia? Accusantium doloribus dolorum, eius in iure, iusto odit officiis praesentium rem,
              rerum similique velit voluptatum.</p>
          </div>
        </a>

      </div>
      <div class="carousel-item">
        <a href="https://qld.gov.au/" title="title">
          <img src="https://via.placeholder.com/920x572/ccc/ccc" alt="placeholder">
          <div class="carousel-caption">
            <h3>lorem ipsum </h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad adipisci atque, ea fuga iste
              quia? Accusantium doloribus dolorum, eius in iure, iusto odit officiis praesentium rem,
              rerum similique velit voluptatum.</p>
          </div>
        </a>
      </div>
    </div>
    <div class="carousel-nav clearfix">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-1" data-slide-to="1"></li>
        <li data-target="#carousel-1" data-slide-to="2"></li>
      </ol>
      <!-- Controls -->
      <ul class="controls-grp">
        <li> <a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev">
          <span class="icon-prev" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        </li>
        <li><a href="#carousel-1" class="toggleCarousel"><i class="fa fa-pause"></i><span class="button-title">Pause slideshow</span></a></li>
        <li><a class="right carousel-control" href="#carousel-1" role="button" data-slide="next">
          <span class="icon-next" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
        </li>
      </ul>
    </div>
  </div>
</div>
Last updated:
28 June 2024