123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174 |
- import { e as effectInit } from '../shared/effect-init.mjs';
- import { c as createElement, o as getRotateFix } from '../shared/utils.mjs';
- function EffectCube(_ref) {
- let {
- swiper,
- extendParams,
- on
- } = _ref;
- extendParams({
- cubeEffect: {
- slideShadows: true,
- shadow: true,
- shadowOffset: 20,
- shadowScale: 0.94
- }
- });
- const createSlideShadows = (slideEl, progress, isHorizontal) => {
- let shadowBefore = isHorizontal ? slideEl.querySelector('.swiper-slide-shadow-left') : slideEl.querySelector('.swiper-slide-shadow-top');
- let shadowAfter = isHorizontal ? slideEl.querySelector('.swiper-slide-shadow-right') : slideEl.querySelector('.swiper-slide-shadow-bottom');
- if (!shadowBefore) {
- shadowBefore = createElement('div', `swiper-slide-shadow-cube swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}`.split(' '));
- slideEl.append(shadowBefore);
- }
- if (!shadowAfter) {
- shadowAfter = createElement('div', `swiper-slide-shadow-cube swiper-slide-shadow-${isHorizontal ? 'right' : 'bottom'}`.split(' '));
- slideEl.append(shadowAfter);
- }
- if (shadowBefore) shadowBefore.style.opacity = Math.max(-progress, 0);
- if (shadowAfter) shadowAfter.style.opacity = Math.max(progress, 0);
- };
- const recreateShadows = () => {
- // create new ones
- const isHorizontal = swiper.isHorizontal();
- swiper.slides.forEach(slideEl => {
- const progress = Math.max(Math.min(slideEl.progress, 1), -1);
- createSlideShadows(slideEl, progress, isHorizontal);
- });
- };
- const setTranslate = () => {
- const {
- el,
- wrapperEl,
- slides,
- width: swiperWidth,
- height: swiperHeight,
- rtlTranslate: rtl,
- size: swiperSize,
- browser
- } = swiper;
- const r = getRotateFix(swiper);
- const params = swiper.params.cubeEffect;
- const isHorizontal = swiper.isHorizontal();
- const isVirtual = swiper.virtual && swiper.params.virtual.enabled;
- let wrapperRotate = 0;
- let cubeShadowEl;
- if (params.shadow) {
- if (isHorizontal) {
- cubeShadowEl = swiper.wrapperEl.querySelector('.swiper-cube-shadow');
- if (!cubeShadowEl) {
- cubeShadowEl = createElement('div', 'swiper-cube-shadow');
- swiper.wrapperEl.append(cubeShadowEl);
- }
- cubeShadowEl.style.height = `${swiperWidth}px`;
- } else {
- cubeShadowEl = el.querySelector('.swiper-cube-shadow');
- if (!cubeShadowEl) {
- cubeShadowEl = createElement('div', 'swiper-cube-shadow');
- el.append(cubeShadowEl);
- }
- }
- }
- for (let i = 0; i < slides.length; i += 1) {
- const slideEl = slides[i];
- let slideIndex = i;
- if (isVirtual) {
- slideIndex = parseInt(slideEl.getAttribute('data-swiper-slide-index'), 10);
- }
- let slideAngle = slideIndex * 90;
- let round = Math.floor(slideAngle / 360);
- if (rtl) {
- slideAngle = -slideAngle;
- round = Math.floor(-slideAngle / 360);
- }
- const progress = Math.max(Math.min(slideEl.progress, 1), -1);
- let tx = 0;
- let ty = 0;
- let tz = 0;
- if (slideIndex % 4 === 0) {
- tx = -round * 4 * swiperSize;
- tz = 0;
- } else if ((slideIndex - 1) % 4 === 0) {
- tx = 0;
- tz = -round * 4 * swiperSize;
- } else if ((slideIndex - 2) % 4 === 0) {
- tx = swiperSize + round * 4 * swiperSize;
- tz = swiperSize;
- } else if ((slideIndex - 3) % 4 === 0) {
- tx = -swiperSize;
- tz = 3 * swiperSize + swiperSize * 4 * round;
- }
- if (rtl) {
- tx = -tx;
- }
- if (!isHorizontal) {
- ty = tx;
- tx = 0;
- }
- const transform = `rotateX(${r(isHorizontal ? 0 : -slideAngle)}deg) rotateY(${r(isHorizontal ? slideAngle : 0)}deg) translate3d(${tx}px, ${ty}px, ${tz}px)`;
- if (progress <= 1 && progress > -1) {
- wrapperRotate = slideIndex * 90 + progress * 90;
- if (rtl) wrapperRotate = -slideIndex * 90 - progress * 90;
- }
- slideEl.style.transform = transform;
- if (params.slideShadows) {
- createSlideShadows(slideEl, progress, isHorizontal);
- }
- }
- wrapperEl.style.transformOrigin = `50% 50% -${swiperSize / 2}px`;
- wrapperEl.style['-webkit-transform-origin'] = `50% 50% -${swiperSize / 2}px`;
- if (params.shadow) {
- if (isHorizontal) {
- cubeShadowEl.style.transform = `translate3d(0px, ${swiperWidth / 2 + params.shadowOffset}px, ${-swiperWidth / 2}px) rotateX(89.99deg) rotateZ(0deg) scale(${params.shadowScale})`;
- } else {
- const shadowAngle = Math.abs(wrapperRotate) - Math.floor(Math.abs(wrapperRotate) / 90) * 90;
- const multiplier = 1.5 - (Math.sin(shadowAngle * 2 * Math.PI / 360) / 2 + Math.cos(shadowAngle * 2 * Math.PI / 360) / 2);
- const scale1 = params.shadowScale;
- const scale2 = params.shadowScale / multiplier;
- const offset = params.shadowOffset;
- cubeShadowEl.style.transform = `scale3d(${scale1}, 1, ${scale2}) translate3d(0px, ${swiperHeight / 2 + offset}px, ${-swiperHeight / 2 / scale2}px) rotateX(-89.99deg)`;
- }
- }
- const zFactor = (browser.isSafari || browser.isWebView) && browser.needPerspectiveFix ? -swiperSize / 2 : 0;
- wrapperEl.style.transform = `translate3d(0px,0,${zFactor}px) rotateX(${r(swiper.isHorizontal() ? 0 : wrapperRotate)}deg) rotateY(${r(swiper.isHorizontal() ? -wrapperRotate : 0)}deg)`;
- wrapperEl.style.setProperty('--swiper-cube-translate-z', `${zFactor}px`);
- };
- const setTransition = duration => {
- const {
- el,
- slides
- } = swiper;
- slides.forEach(slideEl => {
- slideEl.style.transitionDuration = `${duration}ms`;
- slideEl.querySelectorAll('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left').forEach(subEl => {
- subEl.style.transitionDuration = `${duration}ms`;
- });
- });
- if (swiper.params.cubeEffect.shadow && !swiper.isHorizontal()) {
- const shadowEl = el.querySelector('.swiper-cube-shadow');
- if (shadowEl) shadowEl.style.transitionDuration = `${duration}ms`;
- }
- };
- effectInit({
- effect: 'cube',
- swiper,
- on,
- setTranslate,
- setTransition,
- recreateShadows,
- getEffectParams: () => swiper.params.cubeEffect,
- perspective: () => true,
- overwriteParams: () => ({
- slidesPerView: 1,
- slidesPerGroup: 1,
- watchSlidesProgress: true,
- resistanceRatio: 0,
- spaceBetween: 0,
- centeredSlides: false,
- virtualTranslate: true
- })
- });
- }
- export { EffectCube as default };
|