Tabbed Carousel

Theme extension containing functionality for the Tabbed Carousel C&L component.

Installation

This class is pre-installed with Genesis out of the box.

1. Add import TabbedCarousels from 'extensions/tabbed-carousels'; to the JavaScript file where this extension will be imported.
2. Add @import "scss/tabbed-carousel"; to the SCSS file where this extension will be imported.

The installation steps above will initialize all TabbedCarousel instances when the initCarousels() function is called. Alternatively, the TabbedCarousel class can be installed

Example Usage

.mvt

The HTML structure should follow the tabs design pattern and the tabbed_carousel section block within the load_components_display.mvt content section template can be referenced for an example.

.js

Initialize the TabbedCarousels object:

Preferred asynchronous initialization:

(async () => {
    const tabbedCarouselElements = document.getElementsByClassName('js-tabbed-carousel');

    if (!tabbedCarouselElements.length) {
        return;
    }

    const {default: TabbedCarousels} = await import('extensions/tabbed-carousels');

    new TabbedCarousels(tabbedCarouselElements);
})();

Alternatively:

import TabbedCarousels from 'extensions/tabbed-carousels';

new TabbedCarousels(document.getElementsByClassName('js-tabbed-carousel'));

Options

The TabbedCarousel class can take an optional configuration object for the second parameter to override any of the default configuration settings. The following table defines the available options:

Name	Type	Description	Default Value
activeClass	String	Active tab class name.	'g-tabbed-carousel__tab--active'
autoActivatePanels	Boolean	Auto activate the panels on tab focus.	true
tabOverflowClass	String	Tab overflow class name. Used for horizontal overflow detection and styling.	'has-overflow'