123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146 |
- import { c as createShadow } from '../shared/create-shadow.mjs';
- import { e as effectInit } from '../shared/effect-init.mjs';
- import { e as effectTarget } from '../shared/effect-target.mjs';
- import { e as effectVirtualTransitionEnd } from '../shared/effect-virtual-transition-end.mjs';
- import { g as getSlideTransformEl, o as getRotateFix } from '../shared/utils.mjs';
- function EffectCreative(_ref) {
- let {
- swiper,
- extendParams,
- on
- } = _ref;
- extendParams({
- creativeEffect: {
- limitProgress: 1,
- shadowPerProgress: false,
- progressMultiplier: 1,
- perspective: true,
- prev: {
- translate: [0, 0, 0],
- rotate: [0, 0, 0],
- opacity: 1,
- scale: 1
- },
- next: {
- translate: [0, 0, 0],
- rotate: [0, 0, 0],
- opacity: 1,
- scale: 1
- }
- }
- });
- const getTranslateValue = value => {
- if (typeof value === 'string') return value;
- return `${value}px`;
- };
- const setTranslate = () => {
- const {
- slides,
- wrapperEl,
- slidesSizesGrid
- } = swiper;
- const params = swiper.params.creativeEffect;
- const {
- progressMultiplier: multiplier
- } = params;
- const isCenteredSlides = swiper.params.centeredSlides;
- const rotateFix = getRotateFix(swiper);
- if (isCenteredSlides) {
- const margin = slidesSizesGrid[0] / 2 - swiper.params.slidesOffsetBefore || 0;
- wrapperEl.style.transform = `translateX(calc(50% - ${margin}px))`;
- }
- for (let i = 0; i < slides.length; i += 1) {
- const slideEl = slides[i];
- const slideProgress = slideEl.progress;
- const progress = Math.min(Math.max(slideEl.progress, -params.limitProgress), params.limitProgress);
- let originalProgress = progress;
- if (!isCenteredSlides) {
- originalProgress = Math.min(Math.max(slideEl.originalProgress, -params.limitProgress), params.limitProgress);
- }
- const offset = slideEl.swiperSlideOffset;
- const t = [swiper.params.cssMode ? -offset - swiper.translate : -offset, 0, 0];
- const r = [0, 0, 0];
- let custom = false;
- if (!swiper.isHorizontal()) {
- t[1] = t[0];
- t[0] = 0;
- }
- let data = {
- translate: [0, 0, 0],
- rotate: [0, 0, 0],
- scale: 1,
- opacity: 1
- };
- if (progress < 0) {
- data = params.next;
- custom = true;
- } else if (progress > 0) {
- data = params.prev;
- custom = true;
- }
- // set translate
- t.forEach((value, index) => {
- t[index] = `calc(${value}px + (${getTranslateValue(data.translate[index])} * ${Math.abs(progress * multiplier)}))`;
- });
- // set rotates
- r.forEach((value, index) => {
- let val = data.rotate[index] * Math.abs(progress * multiplier);
- r[index] = val;
- });
- slideEl.style.zIndex = -Math.abs(Math.round(slideProgress)) + slides.length;
- const translateString = t.join(', ');
- const rotateString = `rotateX(${rotateFix(r[0])}deg) rotateY(${rotateFix(r[1])}deg) rotateZ(${rotateFix(r[2])}deg)`;
- const scaleString = originalProgress < 0 ? `scale(${1 + (1 - data.scale) * originalProgress * multiplier})` : `scale(${1 - (1 - data.scale) * originalProgress * multiplier})`;
- const opacityString = originalProgress < 0 ? 1 + (1 - data.opacity) * originalProgress * multiplier : 1 - (1 - data.opacity) * originalProgress * multiplier;
- const transform = `translate3d(${translateString}) ${rotateString} ${scaleString}`;
- // Set shadows
- if (custom && data.shadow || !custom) {
- let shadowEl = slideEl.querySelector('.swiper-slide-shadow');
- if (!shadowEl && data.shadow) {
- shadowEl = createShadow('creative', slideEl);
- }
- if (shadowEl) {
- const shadowOpacity = params.shadowPerProgress ? progress * (1 / params.limitProgress) : progress;
- shadowEl.style.opacity = Math.min(Math.max(Math.abs(shadowOpacity), 0), 1);
- }
- }
- const targetEl = effectTarget(params, slideEl);
- targetEl.style.transform = transform;
- targetEl.style.opacity = opacityString;
- if (data.origin) {
- targetEl.style.transformOrigin = data.origin;
- }
- }
- };
- const setTransition = duration => {
- const transformElements = swiper.slides.map(slideEl => getSlideTransformEl(slideEl));
- transformElements.forEach(el => {
- el.style.transitionDuration = `${duration}ms`;
- el.querySelectorAll('.swiper-slide-shadow').forEach(shadowEl => {
- shadowEl.style.transitionDuration = `${duration}ms`;
- });
- });
- effectVirtualTransitionEnd({
- swiper,
- duration,
- transformElements,
- allSlides: true
- });
- };
- effectInit({
- effect: 'creative',
- swiper,
- on,
- setTranslate,
- setTransition,
- perspective: () => swiper.params.creativeEffect.perspective,
- overwriteParams: () => ({
- watchSlidesProgress: true,
- virtualTranslate: !swiper.params.cssMode
- })
- });
- }
- export { EffectCreative as default };
|