window.SliderSlideShow = function(settings){
const BLOCK_CLASS = "field-type-image-slideshow";
const BLOCK = document.querySelector(`.${BLOCK_CLASS}`);
let swiperPreview = null;
let swiperMain = null;
const OPTIONS_PREVIEW = {
init: false,
wrapperClass: "values-inner",
slideClass: "value",
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,
direction: 'horizontal',
}
const OPTIONS_MAIN = {
init: false,
wrapperClass: "values-inner",
slideClass: "value",
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,
thumbs: {
slideThumbActiveClass: 'is-active',
},
}
// let numberSlides = 0;
// functions
this.init = function() {
settings.preview ? this.initSwiperPreview() : null;
this.initSwiperMain();
this.addArrows();
this.addDots();
}
this.initSwiperPreview = function() {
swiperPreview = new Swiper(`.${BLOCK_CLASS} .values-preview`, OPTIONS_PREVIEW);
}
this.initSwiperMain = function() {
swiperMain = new Swiper(`.${BLOCK_CLASS} .values-main`, OPTIONS_MAIN);
if (settings.preview) {
swiperMain.params.thumbs.swiper = swiperPreview;
}
}
this.destroy = function() {
if (BLOCK.classList.contains('js-slider-processed')) {
settings.preview ? swiperPreview.destroy(true, true) : null;
swiperMain.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.insertAdjacentHTML('beforeend', `
`);
}
this.setArrows();
}
this.setArrows = function () {
swiperMain.params.navigation.nextEl = BLOCK.querySelector(".arrows__next");
swiperMain.params.navigation.prevEl = BLOCK.querySelector(".arrows__prev");
swiperMain.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.insertAdjacentHTML("beforeend", `
`);
}
this.setDots();
}
this.setDots = function () {
swiperMain.params.pagination.el = BLOCK.querySelector(".dots");
swiperMain.params.pagination.dynamicBullets = true;
swiperMain.params.pagination.clickable = true;
}
this.removeDots = function () {
if (BLOCK.querySelector(".dots")) {
BLOCK.querySelector(".dots").remove();
}
}
this.setParametersPreviewSlider = function (device) {
if (settings.preview) {
swiperPreview.params.slidesPerView = settings.preview.breakpoint[device].slidesPerView;
swiperPreview.params.slidesPerGroup = settings.preview.breakpoint[device].slidesPerGroup;
swiperPreview.params.spaceBetween = settings.preview.breakpoint[device].spaceBetween;
this.addTextMoreInPreview(device);
swiperPreview.params.direction = settings.preview.direction;
BLOCK.classList.add(`is-direction-${settings.preview.direction}`);
swiperPreview.init();
}
}
this.setParametersMainSlider = function () {
swiperMain.params.slidesPerView = settings.main.slidesPerView;
swiperMain.params.slidesPerGroup = settings.main.slidesPerGroup;
swiperMain.params.spaceBetween = settings.main.spaceBetween;
swiperMain.init();
}
this.addTextMoreInPreview = function(typeDevice) {
if (settings.preview.textMore) {
const main = BLOCK.querySelector('.values-main');
const preview = BLOCK.querySelector('.values-preview');
let breakpoint = settings.preview.breakpoint[typeDevice];
if (main.querySelectorAll('.value').length > breakpoint.slidesPerView) {
if (preview.querySelector('.value-more')) {
preview.querySelector('.value-more').remove();
}
let numberMore = main.querySelectorAll('.value').length - breakpoint.slidesPerView;
preview.querySelectorAll('.value')[breakpoint.slidesPerView-1].insertAdjacentHTML('beforeend', `
${settings.preview.textMore.text} ${numberMore}
`)
preview.querySelector('.value-more').addEventListener('click', e => {
main.querySelectorAll('.value')[breakpoint.slidesPerView-1].querySelector('a').click();
});
}
}
}
this.initRange = function () {
if (document.body.offsetWidth >= BREAKPOINT.desktop[0]) {
if (!BLOCK.classList.contains("js-slider-processed")) {
this.init();
this.setParametersPreviewSlider('desktop');
this.setParametersMainSlider();
this.addProcessed();
}
}
if (document.body.offsetWidth >= BREAKPOINT.laptop[0] && document.body.offsetWidth <= BREAKPOINT.laptop[1]) {
if (!BLOCK.classList.contains("js-slider-processed")) {
this.init();
this.setParametersPreviewSlider('laptop');
this.setParametersMainSlider();
this.addProcessed();
}
}
if ( document.body.offsetWidth >= BREAKPOINT.tablet[0] && document.body.offsetWidth <= BREAKPOINT.tablet[1] ) {
if (!BLOCK.classList.contains("js-slider-processed")) {
this.init();
this.setParametersPreviewSlider('tablet');
this.setParametersMainSlider();
this.addProcessed();
}
}
if ( document.body.offsetWidth <= BREAKPOINT.mobile[1] ) {
if (!BLOCK.classList.contains("js-slider-processed")) {
this.init();
this.setParametersPreviewSlider('mobile');
this.setParametersMainSlider();
this.addProcessed();
}
}
}
// this.countingSlides = function() {
// return BLOCK.querySelectorAll('.values-main .value').length;
// }
// inits
if (BLOCK) {
this.initRange();
window.addEventListener('resize', e => {
if (document.body.offsetWidth >= BREAKPOINT.desktop[0]) {
if (!BLOCK.classList.contains("js-slider-desktop")) {
this.destroy();
}
BLOCK.classList.add("js-slider-desktop");
BLOCK.classList.remove("js-slider-laptop", "js-slider-tablet", "js-slider-mobile");
}
if (document.body.offsetWidth >= BREAKPOINT.laptop[0] && document.body.offsetWidth <= BREAKPOINT.laptop[1]) {
if (!BLOCK.classList.contains("js-slider-laptop")) {
this.destroy();
}
BLOCK.classList.add("js-slider-laptop");
BLOCK.classList.remove("js-slider-desktop", "js-slider-tablet", "js-slider-mobile");
}
if (document.body.offsetWidth >= BREAKPOINT.tablet[0] && document.body.offsetWidth <= BREAKPOINT.tablet[1]) {
if (!BLOCK.classList.contains("js-slider-tablet")) {
this.destroy();
}
BLOCK.classList.add("js-slider-tablet");
BLOCK.classList.remove("js-slider-desktop", "js-slider-laptop", "js-slider-mobile");
}
if ( document.body.offsetWidth <= BREAKPOINT.mobile[1] ) {
if (!BLOCK.classList.contains("js-slider-mobile")) {
this.destroy();
}
BLOCK.classList.add("js-slider-mobile");
BLOCK.classList.remove("js-slider-desktop", "js-slider-laptop", "js-slider-tablet");
}
this.initRange();
});
lightGallery('.' + BLOCK_CLASS, ".values-main a");
}
}