JS Carousel

Overview

All code pertaining to sliders/carousels should live inside the JS Carousel module.

At the time of writing, we use a jQuery plugin called Slick to implement all carousels/sliders. Slick is a well-maintained and robust plugin with plenty of options, and can be easily extended to accommodate custom features. If you're looking for carousel features and settings, please refer to the Slick documentation.

Please note that JS Carousel does not implement the basic carousel functionality; it should be thought of as a wrapper/organizer for carousel-related code that happens to include a few extra features (e.g. progress indicators, a refresh method, etc).

Initialization

All slider initialization code should live inside CarouselHandler.init(). This method provides a default settings object that can be partially or entirely overridden using switch cases.

Different slider types should be designated using the data-carousel-type attribute. This is to prevent a carousel from having more than one type.

Methods

CarouselHandler.refresh($element)

Given a .js-carousel element, refresh its associated Slick slider. Useful for instances where a slider is initially hidden (e.g. in a modal) and needs to be refreshed once visible.

Examples

Basic Carousel

Progress Indicator

Show the current slide index and/or the total number of slides.

Append Arrows

Allows quick use of Slick's appendArrows option.

Append Dots

Allows quick use of Slick's appendDots option.