Scrolling Banner Image Carousel (Dartmouth College)

Body

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
Module Settings
Module Code

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:

Click the Source button in the top-left of the WYSIWYG editor
Paste the code from below
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
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
Save the module

<div class="carousel slide" data-ride="carousel">

   <ol class="carousel-indicators" style="margin-bottom: -3%;">
       <li class="active" data-slide-to="0" data-target=".carousel" style="width: 20px; height: 5px;"> </li>
       
       <li data-slide-to="1" data-target=".carousel" style="width: 20px; height: 5px;"> </li>
       
       <li data-slide-to="2" data-target=".carousel" style="width: 20px; height: 5px;"> </li>
       
       <li data-slide-to="3" data-target=".carousel" style="width: 20px; height: 5px;"> </li>
       
       <li data-slide-to="4" data-target=".carousel" style="width: 20px; height: 5px;"> </li>
       
       
       
   </ol>
   
   <div class="carousel-inner">

       <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&beidInt=323" style="width: 100%;" />
           </a>
       </div>
       
       <div class="item">
           <a href="link2" target="_blank">
               <img alt="image alt text" src="image_source2" style="width: 100%;" />
           </a>
       </div>
       
       <div class="item">
           <a href="link3" target="_blank">
               <img alt="image alt text" src="image_source3" style="width: 100%;" />
           </a>
       </div>
       
       <div class="item">
           <a href="link4" target="_blank">
               <img alt="image alt text" src="image_source4" style="width: 100%;" />
           </a>
       </div>
       
       <div class="item">
           <a href="link5" target="_blank">
               <img alt="image alt text" src="image_source5" style="width: 100%;" />
           </a>
       </div>
       
       
   </div>
   
   <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>