Skip to main content

Carousel

Image carousel News or story image carousel Standard multi-carousel Story and Layout multi-carousel

A carousel is a slideshow that cycles through images. It can also be used to display content that spans multiple slides.

Flowering cherry trees line the UW quad, taken from above.
Optional image caption that is concise and does not repeat alt text.
UW campus exterior
Image alternative text
UW campus in the springtime

Key features

  1. The image carousel block works best with images that are 750 x 500 px.
  2. Optional, concise captions can be displayed below the images.
  3. Clickable indicator dots appear below the images to show how many items are in the carousel.

News or story image carousel

News and story content types do not support the Drupal 2.0 version of the image carousel. The custom code below will not have the optional caption or indicator dots features.

Code


<style>
  .carousel-control-prev,
  .carousel-control-next {
    width: 12%;
    opacity: 1;
  }

  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    width: 1.5rem;
    height: 1.5rem;
    position: relative;
  }

  .carousel-control-next-icon,
  .carousel-control-prev-icon {
    background-image: none;
  }

  .carousel-control-next-icon:before {
    content: "\f105";
    font-family: "Font Awesome 6 Sharp";
    position: absolute;
    top: -11px;
    right: 4px;
    font-size: 2rem;
  }

  .carousel-control-prev-icon:before {
    content: "\f104";
    font-family: "Font Awesome 6 Sharp";
    position: absolute;
    top: -11px;
    left: 4px;
    font-size: 2rem;
  }

  .carousel-control-prev-icon:after,
  .carousel-control-next-icon:after {
    content: '';
    position: absolute;
    top: -12px;
    left: -15px;
    display: block;
    width: 50px;
    height: 50px;
    background-color: #32006e !important;
    border-radius: 0 !important;
    z-index: -1;
  }

  .carousel-control-prev-icon:after {
    left: -11px;
  }

  .carousel-control-prev:hover .carousel-control-prev-icon:after,
  .carousel-control-next:hover .carousel-control-next-icon:after {
    background-color: #C5B4E3 !important;
  }

  @media screen and (max-width: 580px) {
    .carousel-control-prev,
    .carousel-control-next {
      width: 15%;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      width: 1.25rem;
    }

    .carousel-control-prev-icon:after,
    .carousel-control-next-icon:after {
      width: 40px;
      height: 40px;
      left: -11px;
      top: -8px;
    }

    .carousel-control-prev-icon:after {
      left: -9px;
    }
  }
</style>

<div id="carouselExample" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active"><img alt="First slide" class="d-block w-100" src="https://www.engr.washington.edu/files/content/img/W.jpg" /></div>
    <div class="carousel-item"><img alt="Second slide" class="d-block w-100" src="https://www.engr.washington.edu/files/content/img/W-gold.jpg" /></div>
    <div class="carousel-item"><img alt="Third slide" class="d-block w-100" src="https://www.engr.washington.edu/files/content/img/W-metaliic-gold.jpg" /></div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </button>
</div>

Standard multi-carousel

Standard multi-carousels with non-image content, such as cards, are not available in Drupal 2.0 at this time.

Code


<style type="text/css">
  .carousel-multi-item .carousel-indicators {
    bottom: 0;
    top: calc(100% + 0.5rem);
  }       

  .carousel-multi-item .carousel-inner {
    margin-bottom: 50px;
  }

  .carousel-multi-item .carousel-indicators li {
    background-color: rgba(70, 70, 70, 0.25);
  }

  .carousel-multi-item .carousel-indicators .active {
    background-color: #32006e;
  }

  .carousel-multi-item .carousel-indicators li {
    width: 10px;
    height: 10px;
    border-radius: 100%;
  }

  .carousel-multi-item .carousel_control {
    color: #32006e;
  }

  .carousel-multi-item .carousel_control:hover {
    color: #b7a57a;
  }
</style>

<div class="carousel slide carousel-multi-item carousel-fade" id="multi-item-carousel">
  <!--Controls-->
  <div class="text-center mb-3">
    <button class="carousel_control me-2" data-bs-target="#multi-item-carousel" data-bs-slide="prev" type="button" aria-label="Previous slide">
      <i class="fa fa-chevron-circle-left fa-2x" aria-hidden="true"></i>
    </button>
    <button class="carousel_control" data-bs-target="#multi-item-carousel" data-bs-slide="next" type="button" aria-label="Next slide">
      <i class="fa fa-chevron-circle-right fa-2x" aria-hidden="true"></i>
    </button>
  </div>
  <!--/.Controls-->

  <!--Indicators-->
  <ol class="carousel-indicators">
    <li class="active" data-bs-slide-to="0" data-bs-target="#multi-item-carousel">&nbsp;</li>
    <li data-bs-slide-to="1" data-bs-target="#multi-item-carousel">&nbsp;</li>
  </ol>
  <!--/.Indicators-->

  <!--Slides-->
  <div class="carousel-inner">
    <!--First slide-->
    <div class="carousel-item active">
      <div class="row g-4">
        <div class="col-md">
          <div class="card mb-2">
            <div class="card-header">
              <h3 class="m-2">November 15</h3>
            </div>
            <div class="card-body p-4">
              <p><strong>UW Application Deadline</strong><br>You must select an engineering major or “engineering undeclared” to be considered for Direct to College admission</p>
            </div>
          </div>
        </div>
        <div class="col-md">
          <div class="card mb-2">
            <div class="card-header">
              <h3 class="m-2">Mid-March</h3>
            </div>
            <div class="card-body">
              <p>Text goes here for Card #2</p>
            </div>
          </div>
        </div>
        <div class="col-md">
          <div class="card mb-2">
            <div class="card-header">
              <h3 class="m-2">April 15</h3>
            </div>
            <div class="card-body">
              <p>Text goes here for Card #3</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--/.First slide-->

    <!--Second slide-->
    <div class="carousel-item">
      <div class="row g-4">
        <div class="col-md">
          <div class="card mb-2">
            <div class="card-header">
              <h3 class="m-2">End of April</h3>
            </div>
            <div class="card-body p-4">
              <p><strong>College of Engineering Majors Decisions Announced</strong></p>
            </div>
          </div>
        </div>
        <div class="col-md">
          <div class="card mb-2">
            <div class="card-header">
              <h3 class="m-2">May 1</h3>
            </div>
            <div class="card-body">
              <p><strong>Commitment Deadline</strong><br>Commit to attend the UW</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--/.Second slide-->
  </div>
  <!--/.Slides-->
</div>

Story and layout multi-carousel

Live example

Optional headline

Code


<div class="p-lg-5 mb-0" style="background-color: #ECE9E2">
  <div class="container my-3 py-3 my-lg-4 py-lg-3 m-auto">
    <!-- Optional headline -->
    <h2 class="mb-5 text-align-center">Headline</h2>
    <div class="carousel slide carousel-multi-item carousel-fade" id="multi-item-carousel">
     
      <!--Controls-->
      <div class="text-center mb-3">
        <button class="carousel_control me-2" data-bs-target="#multi-item-carousel" data-bs-slide="prev" type="button" aria-label="Previous slide">
          <i class="fa fa-chevron-circle-left fa-2x" aria-hidden="true"></i>
        </button>
        <button class="carousel_control" data-bs-target="#multi-item-carousel" data-bs-slide="next" type="button" aria-label="Next slide">
          <i class="fa fa-chevron-circle-right fa-2x" aria-hidden="true"></i>
        </button>
      </div>
      <!--/.Controls-->

      <!--Indicators-->
      <ol class="carousel-indicators">
        <li class="active" data-bs-slide-to="0" data-bs-target="#multi-item-carousel">&nbsp;</li>
        <li data-bs-slide-to="1" data-bs-target="#multi-item-carousel">&nbsp;</li>
      </ol>
      <!--/.Indicators-->

      <!--Slides-->
      <div class="carousel-inner">

        <!--First slide-->
        <div class="carousel-item active">
          <div class="row g-4">

            <div class="col-md">
              <div class="card mb-2">
                <div>
                  <img class="card-img-top" alt="#" src="https://www.engr.washington.edu/sites/default/files/media/images/2026/05/moon-magnetic-fields-480x320.jpg">
                </div>
                <div class="card-body">
                  <p class="is-style-tag mb-2">Tag goes here</p>
                  <h3 class="mt-0 card-title">Headline goes here</h3>
                  <p>Body text goes here.</p>
                  <p><a class="btn is-style-default mb-0" href="#">Link to somewhere</a></p>
                </div>
              </div>
            </div>

            <div class="col-md">
              <div class="card mb-2">
                <div>
                  <img class="card-img-top" alt="#" src="https://www.engr.washington.edu/sites/default/files/media/images/2026/05/HCAI-320x200.jpg">
                </div>
                <div class="card-body">
                  <p class="is-style-tag mb-2">Optional tag</p>
                  <h3 class="mt-0 card-title">Headline 2 goes here</h3>
                  <p>Body text goes here.</p>
                  <p><a class="btn is-style-default mb-0" href="#">Link to somewhere</a></p>
                </div>
              </div>
            </div>

            <div class="col-md">
              <div class="card mb-2">
                <div>
                  <img class="card-img-top" alt="#" src="https://www.engr.washington.edu/sites/default/files/media/images/2026/05/moon-magnetic-fields-480x320.jpg">
                </div>
                <div class="card-body">
                  <p class="is-style-tag mb-2">Tag goes here</p>
                  <h3 class="mt-0 card-title">Headline 3 goes here</h3>
                  <p>Body text goes here.</p>
                  <p><a class="btn is-style-default mb-0" href="#">Link to somewhere</a></p>
                </div>
              </div>
            </div>

          </div>
        </div>
        <!--/.First slide-->

        <!--Second slide-->
        <div class="carousel-item">
          <div class="row g-4">
            <div class="col-md">
              <div class="card mb-2">
                <div>
                  <img class="card-img-top" alt="#" src="https://www.engr.washington.edu/sites/default/files/media/images/2026/05/DASO-320x200.jpg">
                </div>
                <div class="card-body">
                  <p class="is-style-tag mb-2">Optional tag</p>
                  <h3 class="mt-0 card-title">Headline goes here</h3>
                  <p>Body text goes here.</p>
                  <p><a class="btn is-style-default mb-0" href="#">Link to somewhere</a></p>
                </div>
              </div>
            </div>
            <div class="col-md">
              <div class="card mb-2">
                <div>
                  <img class="card-img-top" alt="#" src="https://www.engr.washington.edu/sites/default/files/media/images/2026/05/moon-magnetic-fields-480x320.jpg">
                </div>
                <div class="card-body">
                  <p class="is-style-tag mb-2">Tag goes here</p>
                  <h3 class="mt-0 card-title">Headline goes here</h3>
                  <p>Body text goes here.</p>
                  <p><a class="btn is-style-default mb-0" href="#">Link to somewhere</a></p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--/.Second slide-->
      </div>
      <!--/.Slides-->
    </div>
  </div>
</div>