window.Slider = function(settings){
const SELECTOR = settings.selector;
const ELEMENT_CLASS = SELECTOR.split(/\.|#/gi)[1];
const BLOCK = document.querySelector(SELECTOR);
const SLIDER = BLOCK ? BLOCK.querySelector(".slider") : null;
const OPTIONS = {
init: false,
wrapperClass: "slider-content",
slideClass: "teaser",
slidesPerView: 1,
slidesPerGroup: 1,
setWrapperSize: true,
grabCursor: true,
spaceBetween: 0,
watchOverflow: true,
updateOnWindowResize: true,
observer: true,
observeParents: true,
observeSlideChildren: true,
loop: false,
loopFillGroupWithBlank: true,
freeMode: false,
freeModeMomentum: false,
}
let swiper = null;
let numberSlides = 0;
// functions
this.init = function() {
SLIDER ? this.initSwiper() : null;
}
this.initSwiper = function() {
swiper = new Swiper(`${SELECTOR} .slider-inner`, OPTIONS);
this.addArrows();
this.addDots();
}
this.destroy = function() {
if (BLOCK.classList.contains('js-slider-processed')) {
swiper.destroy(true, true);
this.removeProcessed();
this.removeArrows();
this.removeDots();
}
}
this.addProcessed = function () {
BLOCK.classList.add("js-slider-processed");
}
this.removeProcessed = function () {
BLOCK.classList.remove("js-slider-processed");
}
this.addArrows = function () {
if (!BLOCK.querySelector(".arrows")) {
BLOCK.querySelector(".slider-inner").insertAdjacentHTML('afterbegin', `
<div class="arrows">
<div class="arrows__arrow arrows__prev"></div>
<div class="arrows__arrow arrows__next"></div>
</div>
`);
}
this.setArrows();
}
this.setArrows = function () {
swiper.params.navigation.nextEl = BLOCK.querySelector(".arrows__next");
swiper.params.navigation.prevEl = BLOCK.querySelector(".arrows__prev");
swiper.params.navigation.disabledClass = "arrows__arrow_disabled";
}
this.removeArrows = function () {
if (BLOCK.querySelector(".arrows")) {
BLOCK.querySelector(".arrows").remove();
}
}
this.addDots = function () {
if (!BLOCK.querySelector(".dots")) {
BLOCK.querySelector(".slider-inner").insertAdjacentHTML("beforeend", `
<div class="dots"></div>
`);
}
this.setDots();
}
this.setDots = function () {
swiper.params.pagination.el = BLOCK.querySelector(".dots");
swiper.params.pagination.dynamicBullets = true;
swiper.params.pagination.clickable = true;
}
this.removeDots = function () {
if (BLOCK.querySelector(".dots")) {
BLOCK.querySelector(".dots").remove();
}
}
this.setParameters = function (device) {
const {
slidesPerView,
slidesPerGroup,
spaceBetween,
} = settings.breakpoint[device];
swiper.params.slidesPerView = slidesPerView;
swiper.params.slidesPerGroup = slidesPerGroup;
swiper.params.spaceBetween = spaceBetween;
swiper.init();
}
this.initRange = function () {
if (document.body.offsetWidth >= BREAKPOINT.desktop[0]) {
if (settings.breakpoint.desktop) {
if (!BLOCK.classList.contains("js-slider-processed")) {
if (numberSlides > settings.breakpoint.desktop.slidesPerView) {
this.init();
this.setParameters("desktop");
this.addProcessed();
} else {
this.destroy();
}
}
} else {
this.destroy();
}
}
if (document.body.offsetWidth >= BREAKPOINT.laptop[0] && document.body.offsetWidth <= BREAKPOINT.laptop[1]) {
if (settings.breakpoint.laptop) {
if (!BLOCK.classList.contains("js-slider-processed")) {
if (numberSlides > settings.breakpoint.laptop.slidesPerView) {
this.init();
this.setParameters('laptop');
this.addProcessed();
} else {
this.destroy();
}
}
} else {
this.destroy();
}
}
if ( document.body.offsetWidth >= BREAKPOINT.tablet[0] && document.body.offsetWidth <= BREAKPOINT.tablet[1] ) {
if (settings.breakpoint.tablet) {
if (!BLOCK.classList.contains("js-slider-processed")) {
if (numberSlides > settings.breakpoint.tablet.slidesPerView) {
this.init();
this.setParameters('tablet');
this.addProcessed();
} else {
this.destroy();
}
}
} else {
this.destroy();
}
}
if ( document.body.offsetWidth <= BREAKPOINT.mobile[1] ) {
if (settings.breakpoint.mobile) {
if (!BLOCK.classList.contains("js-slider-processed")) {
if (numberSlides > settings.breakpoint.mobile.slidesPerView) {
this.init();
this.setParameters('mobile');
this.addProcessed();
} else {
this.destroy();
}
}
} else {
this.destroy();
}
}
}
// inits
if (SLIDER) {
numberSlides = BLOCK.querySelectorAll('.teaser').length;
this.initRange();
window.addEventListener('resize', e => {
if (document.body.offsetWidth >= BREAKPOINT.desktop[0]) {
if (!BLOCK.classList.contains("js-slider-desktop")) {
this.destroy();
}
}
if (document.body.offsetWidth >= BREAKPOINT.laptop[0] && document.body.offsetWidth <= BREAKPOINT.laptop[1]) {
if (!BLOCK.classList.contains("js-slider-laptop")) {
this.destroy();
}
}
if (document.body.offsetWidth >= BREAKPOINT.tablet[0] && document.body.offsetWidth <= BREAKPOINT.tablet[1]) {
if (!BLOCK.classList.contains("js-slider-tablet")) {
this.destroy();
}
}
if (document.body.offsetWidth <= BREAKPOINT.mobile[1]) {
if (!BLOCK.classList.contains("js-slider-mobile")) {
this.destroy();
}
}
numberSlides = BLOCK.querySelectorAll('.teaser').length;
this.initRange();
});
}
}