Carousel sizes come in two sizes: big (full screen), which is default, and small (which uses the one of the 3 columns in the 3-column add-on). If it is a small carousel replace class="carousel slide" with class="carousel-col-4 slide" in the outtermost first div in the code.

Governance requirements:

• Images cannot have text.
• Images should be of real things (people, locations). Graphics and logos cannot be used.

Other notes:

• You can use the carousel code generator to create HTML code to paste into your page.
• The number of li’s under carousel-indicators must equal the number of carousel items.
• The 'active' class sets which item is shown first on page load. There cannot be two 'active' items.
• Multiple carousels: Carousels require the use of an id on the outermost container (the .carousel) for carousel controls to function properly. When adding multiple carousels, or when changing a carousel's id, be sure to update the relevant controls.

Small carousel

Use this carousel, if it will be 1/2 page width (6 columns) or smaller on large screens. This carousel has smaller text.

• For the small carousel replace class="carousel slide" with class="carousel-col-4 slide" in the outermost first div in the code.
• Save your images to be 767 px wide. You can choose a height, but it must be the same height for all images, otherwise your page will jump. A height less than 598 px is recommended.

Large carousel

Use this carousel if it will be full width (12 columns) on all your page sizes. This carousel has larger text.

• Save your images to be 845 px wide. You can choose a height, but it must be the same height for all images, otherwise your page will jump. A height less than 598 px is recommended.

Image sizes

Ideally, all images in a carousel have the same dimensions. At a minimum, they need to have the same proportions, or the carousel will appear to jump around. If you need to change the size of an image, free online tools like http://www.picresize.com/ let you crop, resize and more.