/* eslint-env jquery */
export default class CarouselSlider {
constructor( selector ) {
this.swiper = null;
this.selector = selector;
this.init = this.init.bind( this );
this.initSlider = this.initSlider.bind( this );
this.init();
}
init() {
const that = this;
$( this.selector ).each( function() {
const iD = $( this ).attr( 'id' );
const selector = '#' + iD + ' .swiper-container';
that.initSlider( selector, '#' + iD );
} );
}
createConf( conf = {}, parent = '' ) {
const isUpperCase = ( str ) => {
return str === str.toUpperCase();
};
Object.keys( conf ).map( ( key ) => {
let confVal,
dataAttr = key.split( '' ).map( function( val ) {
if ( isUpperCase( val ) && val.length >= 1 ) {
return '-' + val.toLowerCase();
}
return val;
} );
dataAttr = dataAttr.join( '' );
if ( parseInt( $( parent ).data( dataAttr ) ) !== 0 && typeof $( parent ).data( dataAttr ) !== 'undefined' ) {
if ( key === 'delay' ) {
conf.autoplay = {
delay: parseInt( $( parent ).data( dataAttr ) ) * 1000,
};
} else if ( key === 'paginate' ) {
conf.pagination = {
el: '.swiper-pagination',
clickable: true,
};
} else if ( key === 'navigation' && $( parent ).find( '.bastet-slider-arrow' ).length ) {
conf.navigation = {
nextEl: '.bastet-button-next',
prevEl: '.bastet-button-prev',
};
} else if ( key === 'slidesPerView' && $( parent ).data( dataAttr ) > 1 ) {
conf.breakpoints = {
767: {
slidesPerView: 1,
},
768: {
slidesPerView: 2,
},
960: {
slidesPerView: $( parent ).data( dataAttr ),
},
};
} else {
confVal = $( parent ).data( dataAttr ) === 'false' ? false : $( parent ).data( dataAttr );
conf[ key ] = confVal;
}
}
} );
return conf;
}
initSlider( selector, parent ) {
if ( ! $( this.selector ).length ) {
return null;
}
let conf = {
direction: 'horizontal',
slidesPerView: 1,
spaceBetween: 0,
slidesPerGroup: 1,
loop: true,
centeredSlides: false,
freeMode: false,
navigation: 0,
delay: 0,
paginate: 0,
breakpoints: {
767: {
slidesPerView: 1,
},
768: {
slidesPerView: 1,
},
960: {
slidesPerView: 1,
},
},
};
conf = this.createConf( conf, parent );
this.swiper = new Swiper( selector, conf );
}
}