Scrolling Banner Image Carousel (Dartmouth College)

Introduction

Create a banner with a series of optionally click-able images that can be navigated via forward/back arrows.  The carousel loads the first image and displays it statically, but once the forward arrow has been clicked, the carousel begins automatically rotating the images.

This module was originally designed by Dartmouth College.

Screenshots

First Image on Scrolling Carousel, Shows July 2024 Information, Technology and Consulting with a spring campus photo of Dartmouth

Second image in carousel, saying "Congratulations Class of 2024" from Information Technology and Consulting, with colorful chalk lines in the background

Module Settings

  • Show Border: unchecked
  • Show Name: unchecked
  • Sanitize Content: checked
  • Layout Notes: this module works well in 100% width columns, but will automatically scale to fit smaller column sizes

Module Code

To use the code in the box below, when creating a new module:

  1. Click the Source button in the top-left of the WYSIWYG editor
  2. Paste the code from below
  3. IMPORTANT: Update links and images to match your environment references
    1. It is recommended to keep the images the same size. 
    2. The images used originally are 1280px x 220px
  4. Click the Source button again to see a preview of the content
    Note: some styling may not display until the module is viewed in the client portal
  5. Save the module

<!-- carousel start -->
<div class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators" style="margin-bottom: -3%;">
        <li class="active" data-slide-to="0" data-target=".carousel" style="width: 20px; height: 5px;">&nbsp;</li>
        <!-- 2 -->
        <li data-slide-to="1" data-target=".carousel" style="width: 20px; height: 5px;">&nbsp;</li>
        <!-- 3 -->
        <li data-slide-to="2" data-target=".carousel" style="width: 20px; height: 5px;">&nbsp;</li>
        <!-- 4 -->
        <li data-slide-to="3" data-target=".carousel" style="width: 20px; height: 5px;">&nbsp;</li>
        <!-- 5 -->
        <li data-slide-to="4" data-target=".carousel" style="width: 20px; height: 5px;">&nbsp;</li>
        <!-- add more as needed -->
        <!-- example -->
        <!-- <li data-slide-to="5" data-target=".carousel" style="width: 20px; height: 5px;">&nbsp;</li> -->
    </ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <!-- image1 -->
        <div class="item active">
            <a href="https://services.dartmouth.edu/" target="_blank">
                <img alt="image alt text" src="https://services.dartmouth.edu/TDPortal/Images/Viewer?fileName=dd75be20-db92-491d-a43f-ee864953dafc.png&amp;beidInt=323" style="width: 100%;" />
            </a>
        </div>
        <!-- image2 -->
        <div class="item">
            <a href="link2" target="_blank">
                <img alt="image alt text" src="image_source2" style="width: 100%;" />
            </a>
        </div>
        <!-- image3 -->
        <div class="item">
            <a href="link3" target="_blank">
                <img alt="image alt text" src="image_source3" style="width: 100%;" />
            </a>
        </div>
        <!-- image4 -->
        <div class="item">
            <a href="link4" target="_blank">
                <img alt="image alt text" src="image_source4" style="width: 100%;" />
            </a>
        </div>
        <!-- image5 -->
        <div class="item">
            <a href="link5" target="_blank">
                <img alt="image alt text" src="image_source5" style="width: 100%;" />
            </a>
        </div>
        <!-- extra -->
        <!-- <div class="item">
            <a href="link6" target="_blank">
                <img alt="image alt text" src="image_source6" style="width: 100%;" />
            </a>
        </div> -->
    </div>
    <!-- Controls -->
    <a class="left carousel-control" data-slide="prev" href=".carousel" role="button" style="left: -5%;">
        <span class="glyphicon glyphicon-chevron-left"></span> 
        <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" data-slide="next" href=".carousel" role="button" style="right: -5%;">
        <span class="glyphicon glyphicon-chevron-right"></span> 
        <span class="sr-only">Next</span> 
    </a>
</div>

Print Article