/**
* Loads and configures any carousels that are on the page.
*
* @module CarouselLoader
* @prop {object} selectors - Carousel CSS selectors
* @prop {object} settings - Carousel config settings objects
*/
import Carousel from './classes/Carousel';
const CarouselLoader = {
selectors: {
editorsPicks: '.l-editorsPicks',
featuredCarousel: '.l-featuredCarousel',
radioBanners: '.l-radioCarousel',
},
settings: {
editorsPicks: {
initSettings: {
gap: 32,
perView: 2,
peek: {
before: 0,
after: 206,
},
breakpoints: {
1023: {
gap: 32,
peek: {
before: 0,
after: 200,
},
},
599: {
gap: 16,
peek: {
before: 0,
after: 120,
},
perView: 1,
},
},
},
activeSettings: {
gap: 32,
perView: 2,
peek: 100,
breakpoints: {
1023: {
gap: 32,
peek: 100,
},
599: {
gap: 16,
peek: 60,
perView: 1,
},
},
},
layoutClass: 'l-editorsPicks',
},
featuredCarousel: {
initSettings: {
type: 'carousel',
gap: 1,
perView: 1,
peek: 0,
autoplay: 6000,
},
enableAtWidth: 768,
hasPicker: true,
layoutClass: 'l-featuredCarousel',
},
radioBanners: {
initSettings: {
type: 'carousel',
gap: 1,
perView: 1,
peek: {
before: 120,
after: 120,
},
autoplay: 6000,
breakpoints: {
1023: {
peek: 100,
},
599: {
peek: 0,
},
},
},
layoutClass: 'l-radioCarousel',
},
},
/**
* Initializes carousels based on `this.selectors` and `this.settings`.
*
* @method init
*/
init() {
[].forEach.call( Object.keys( this.selectors ), ( key ) => {
const $elems = document.querySelectorAll( this.selectors[key]);
const settings = this.settings[key];
[].forEach.call( $elems, ( $elem ) => {
const carousel = new Carousel( $elem, settings );
carousel.init();
});
});
},
};
export default CarouselLoader;