import $ from '../../utils/dom';
|
import Utils from '../../utils/utils';
|
|
const Virtual = {
|
update(force) {
|
const swiper = this;
|
const { slidesPerView, slidesPerGroup, centeredSlides } = swiper.params;
|
const { addSlidesBefore, addSlidesAfter } = swiper.params.virtual;
|
const {
|
from: previousFrom,
|
to: previousTo,
|
slides,
|
slidesGrid: previousSlidesGrid,
|
renderSlide,
|
offset: previousOffset,
|
} = swiper.virtual;
|
swiper.updateActiveIndex();
|
const activeIndex = swiper.activeIndex || 0;
|
|
let offsetProp;
|
if (swiper.rtlTranslate) offsetProp = 'right';
|
else offsetProp = swiper.isHorizontal() ? 'left' : 'top';
|
|
let slidesAfter;
|
let slidesBefore;
|
if (centeredSlides) {
|
slidesAfter = Math.floor(slidesPerView / 2) + slidesPerGroup + addSlidesBefore;
|
slidesBefore = Math.floor(slidesPerView / 2) + slidesPerGroup + addSlidesAfter;
|
} else {
|
slidesAfter = slidesPerView + (slidesPerGroup - 1) + addSlidesBefore;
|
slidesBefore = slidesPerGroup + addSlidesAfter;
|
}
|
const from = Math.max((activeIndex || 0) - slidesBefore, 0);
|
const to = Math.min((activeIndex || 0) + slidesAfter, slides.length - 1);
|
const offset = (swiper.slidesGrid[from] || 0) - (swiper.slidesGrid[0] || 0);
|
|
Utils.extend(swiper.virtual, {
|
from,
|
to,
|
offset,
|
slidesGrid: swiper.slidesGrid,
|
});
|
|
function onRendered() {
|
swiper.updateSlides();
|
swiper.updateProgress();
|
swiper.updateSlidesClasses();
|
if (swiper.lazy && swiper.params.lazy.enabled) {
|
swiper.lazy.load();
|
}
|
}
|
|
if (previousFrom === from && previousTo === to && !force) {
|
if (swiper.slidesGrid !== previousSlidesGrid && offset !== previousOffset) {
|
swiper.slides.css(offsetProp, `${offset}px`);
|
}
|
swiper.updateProgress();
|
return;
|
}
|
if (swiper.params.virtual.renderExternal) {
|
swiper.params.virtual.renderExternal.call(swiper, {
|
offset,
|
from,
|
to,
|
slides: (function getSlides() {
|
const slidesToRender = [];
|
for (let i = from; i <= to; i += 1) {
|
slidesToRender.push(slides[i]);
|
}
|
return slidesToRender;
|
}()),
|
});
|
onRendered();
|
return;
|
}
|
const prependIndexes = [];
|
const appendIndexes = [];
|
if (force) {
|
swiper.$wrapperEl.find(`.${swiper.params.slideClass}`).remove();
|
} else {
|
for (let i = previousFrom; i <= previousTo; i += 1) {
|
if (i < from || i > to) {
|
swiper.$wrapperEl.find(`.${swiper.params.slideClass}[data-swiper-slide-index="${i}"]`).remove();
|
}
|
}
|
}
|
for (let i = 0; i < slides.length; i += 1) {
|
if (i >= from && i <= to) {
|
if (typeof previousTo === 'undefined' || force) {
|
appendIndexes.push(i);
|
} else {
|
if (i > previousTo) appendIndexes.push(i);
|
if (i < previousFrom) prependIndexes.push(i);
|
}
|
}
|
}
|
appendIndexes.forEach((index) => {
|
swiper.$wrapperEl.append(renderSlide(slides[index], index));
|
});
|
prependIndexes.sort((a, b) => b - a).forEach((index) => {
|
swiper.$wrapperEl.prepend(renderSlide(slides[index], index));
|
});
|
swiper.$wrapperEl.children('.swiper-slide').css(offsetProp, `${offset}px`);
|
onRendered();
|
},
|
renderSlide(slide, index) {
|
const swiper = this;
|
const params = swiper.params.virtual;
|
if (params.cache && swiper.virtual.cache[index]) {
|
return swiper.virtual.cache[index];
|
}
|
const $slideEl = params.renderSlide
|
? $(params.renderSlide.call(swiper, slide, index))
|
: $(`<div class="${swiper.params.slideClass}" data-swiper-slide-index="${index}">${slide}</div>`);
|
if (!$slideEl.attr('data-swiper-slide-index')) $slideEl.attr('data-swiper-slide-index', index);
|
if (params.cache) swiper.virtual.cache[index] = $slideEl;
|
return $slideEl;
|
},
|
appendSlide(slides) {
|
const swiper = this;
|
if (typeof slides === 'object' && 'length' in slides) {
|
for (let i = 0; i < slides.length; i += 1) {
|
if (slides[i]) swiper.virtual.slides.push(slides[i]);
|
}
|
} else {
|
swiper.virtual.slides.push(slides);
|
}
|
swiper.virtual.update(true);
|
},
|
prependSlide(slides) {
|
const swiper = this;
|
const activeIndex = swiper.activeIndex;
|
let newActiveIndex = activeIndex + 1;
|
let numberOfNewSlides = 1;
|
|
if (Array.isArray(slides)) {
|
for (let i = 0; i < slides.length; i += 1) {
|
if (slides[i]) swiper.virtual.slides.unshift(slides[i]);
|
}
|
newActiveIndex = activeIndex + slides.length;
|
numberOfNewSlides = slides.length;
|
} else {
|
swiper.virtual.slides.unshift(slides);
|
}
|
if (swiper.params.virtual.cache) {
|
const cache = swiper.virtual.cache;
|
const newCache = {};
|
Object.keys(cache).forEach((cachedIndex) => {
|
const $cachedEl = cache[cachedIndex];
|
const cachedElIndex = $cachedEl.attr('data-swiper-slide-index');
|
if (cachedElIndex) {
|
$cachedEl.attr('data-swiper-slide-index', parseInt(cachedElIndex, 10) + 1);
|
}
|
newCache[parseInt(cachedIndex, 10) + numberOfNewSlides] = $cachedEl;
|
});
|
swiper.virtual.cache = newCache;
|
}
|
swiper.virtual.update(true);
|
swiper.slideTo(newActiveIndex, 0);
|
},
|
removeSlide(slidesIndexes) {
|
const swiper = this;
|
if (typeof slidesIndexes === 'undefined' || slidesIndexes === null) return;
|
let activeIndex = swiper.activeIndex;
|
if (Array.isArray(slidesIndexes)) {
|
for (let i = slidesIndexes.length - 1; i >= 0; i -= 1) {
|
swiper.virtual.slides.splice(slidesIndexes[i], 1);
|
if (swiper.params.virtual.cache) {
|
delete swiper.virtual.cache[slidesIndexes[i]];
|
}
|
if (slidesIndexes[i] < activeIndex) activeIndex -= 1;
|
activeIndex = Math.max(activeIndex, 0);
|
}
|
} else {
|
swiper.virtual.slides.splice(slidesIndexes, 1);
|
if (swiper.params.virtual.cache) {
|
delete swiper.virtual.cache[slidesIndexes];
|
}
|
if (slidesIndexes < activeIndex) activeIndex -= 1;
|
activeIndex = Math.max(activeIndex, 0);
|
}
|
swiper.virtual.update(true);
|
swiper.slideTo(activeIndex, 0);
|
},
|
removeAllSlides() {
|
const swiper = this;
|
swiper.virtual.slides = [];
|
if (swiper.params.virtual.cache) {
|
swiper.virtual.cache = {};
|
}
|
swiper.virtual.update(true);
|
swiper.slideTo(0, 0);
|
},
|
};
|
|
export default {
|
name: 'virtual',
|
params: {
|
virtual: {
|
enabled: false,
|
slides: [],
|
cache: true,
|
renderSlide: null,
|
renderExternal: null,
|
addSlidesBefore: 0,
|
addSlidesAfter: 0,
|
},
|
},
|
create() {
|
const swiper = this;
|
Utils.extend(swiper, {
|
virtual: {
|
update: Virtual.update.bind(swiper),
|
appendSlide: Virtual.appendSlide.bind(swiper),
|
prependSlide: Virtual.prependSlide.bind(swiper),
|
removeSlide: Virtual.removeSlide.bind(swiper),
|
removeAllSlides: Virtual.removeAllSlides.bind(swiper),
|
renderSlide: Virtual.renderSlide.bind(swiper),
|
slides: swiper.params.virtual.slides,
|
cache: {},
|
},
|
});
|
},
|
on: {
|
beforeInit() {
|
const swiper = this;
|
if (!swiper.params.virtual.enabled) return;
|
swiper.classNames.push(`${swiper.params.containerModifierClass}virtual`);
|
const overwriteParams = {
|
watchSlidesProgress: true,
|
};
|
Utils.extend(swiper.params, overwriteParams);
|
Utils.extend(swiper.originalParams, overwriteParams);
|
|
if (!swiper.params.initialSlide) {
|
swiper.virtual.update();
|
}
|
},
|
setTranslate() {
|
const swiper = this;
|
if (!swiper.params.virtual.enabled) return;
|
swiper.virtual.update();
|
},
|
},
|
};
|
