package.modules.parallax.mjs Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of swiper Show documentation
Show all versions of swiper Show documentation
Most modern mobile touch slider and framework with hardware accelerated transitions
import { e as elementChildren } from '../shared/utils.mjs';
function Parallax(_ref) {
let {
swiper,
extendParams,
on
} = _ref;
extendParams({
parallax: {
enabled: false
}
});
const elementsSelector = '[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale]';
const setTransform = (el, progress) => {
const {
rtl
} = swiper;
const rtlFactor = rtl ? -1 : 1;
const p = el.getAttribute('data-swiper-parallax') || '0';
let x = el.getAttribute('data-swiper-parallax-x');
let y = el.getAttribute('data-swiper-parallax-y');
const scale = el.getAttribute('data-swiper-parallax-scale');
const opacity = el.getAttribute('data-swiper-parallax-opacity');
const rotate = el.getAttribute('data-swiper-parallax-rotate');
if (x || y) {
x = x || '0';
y = y || '0';
} else if (swiper.isHorizontal()) {
x = p;
y = '0';
} else {
y = p;
x = '0';
}
if (x.indexOf('%') >= 0) {
x = `${parseInt(x, 10) * progress * rtlFactor}%`;
} else {
x = `${x * progress * rtlFactor}px`;
}
if (y.indexOf('%') >= 0) {
y = `${parseInt(y, 10) * progress}%`;
} else {
y = `${y * progress}px`;
}
if (typeof opacity !== 'undefined' && opacity !== null) {
const currentOpacity = opacity - (opacity - 1) * (1 - Math.abs(progress));
el.style.opacity = currentOpacity;
}
let transform = `translate3d(${x}, ${y}, 0px)`;
if (typeof scale !== 'undefined' && scale !== null) {
const currentScale = scale - (scale - 1) * (1 - Math.abs(progress));
transform += ` scale(${currentScale})`;
}
if (rotate && typeof rotate !== 'undefined' && rotate !== null) {
const currentRotate = rotate * progress * -1;
transform += ` rotate(${currentRotate}deg)`;
}
el.style.transform = transform;
};
const setTranslate = () => {
const {
el,
slides,
progress,
snapGrid,
isElement
} = swiper;
const elements = elementChildren(el, elementsSelector);
if (swiper.isElement) {
elements.push(...elementChildren(swiper.hostEl, elementsSelector));
}
elements.forEach(subEl => {
setTransform(subEl, progress);
});
slides.forEach((slideEl, slideIndex) => {
let slideProgress = slideEl.progress;
if (swiper.params.slidesPerGroup > 1 && swiper.params.slidesPerView !== 'auto') {
slideProgress += Math.ceil(slideIndex / 2) - progress * (snapGrid.length - 1);
}
slideProgress = Math.min(Math.max(slideProgress, -1), 1);
slideEl.querySelectorAll(`${elementsSelector}, [data-swiper-parallax-rotate]`).forEach(subEl => {
setTransform(subEl, slideProgress);
});
});
};
const setTransition = function (duration) {
if (duration === void 0) {
duration = swiper.params.speed;
}
const {
el,
hostEl
} = swiper;
const elements = [...el.querySelectorAll(elementsSelector)];
if (swiper.isElement) {
elements.push(...hostEl.querySelectorAll(elementsSelector));
}
elements.forEach(parallaxEl => {
let parallaxDuration = parseInt(parallaxEl.getAttribute('data-swiper-parallax-duration'), 10) || duration;
if (duration === 0) parallaxDuration = 0;
parallaxEl.style.transitionDuration = `${parallaxDuration}ms`;
});
};
on('beforeInit', () => {
if (!swiper.params.parallax.enabled) return;
swiper.params.watchSlidesProgress = true;
swiper.originalParams.watchSlidesProgress = true;
});
on('init', () => {
if (!swiper.params.parallax.enabled) return;
setTranslate();
});
on('setTranslate', () => {
if (!swiper.params.parallax.enabled) return;
setTranslate();
});
on('setTransition', (_swiper, duration) => {
if (!swiper.params.parallax.enabled) return;
setTransition(duration);
});
}
export { Parallax as default };