123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111 |
- 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 EffectFlip(_ref) {
- let {
- swiper,
- extendParams,
- on
- } = _ref;
- extendParams({
- flipEffect: {
- slideShadows: true,
- limitRotation: true
- }
- });
- const createSlideShadows = (slideEl, progress) => {
- let shadowBefore = swiper.isHorizontal() ? slideEl.querySelector('.swiper-slide-shadow-left') : slideEl.querySelector('.swiper-slide-shadow-top');
- let shadowAfter = swiper.isHorizontal() ? slideEl.querySelector('.swiper-slide-shadow-right') : slideEl.querySelector('.swiper-slide-shadow-bottom');
- if (!shadowBefore) {
- shadowBefore = createShadow('flip', slideEl, swiper.isHorizontal() ? 'left' : 'top');
- }
- if (!shadowAfter) {
- shadowAfter = createShadow('flip', slideEl, swiper.isHorizontal() ? 'right' : 'bottom');
- }
- if (shadowBefore) shadowBefore.style.opacity = Math.max(-progress, 0);
- if (shadowAfter) shadowAfter.style.opacity = Math.max(progress, 0);
- };
- const recreateShadows = () => {
- // Set shadows
- swiper.params.flipEffect;
- swiper.slides.forEach(slideEl => {
- let progress = slideEl.progress;
- if (swiper.params.flipEffect.limitRotation) {
- progress = Math.max(Math.min(slideEl.progress, 1), -1);
- }
- createSlideShadows(slideEl, progress);
- });
- };
- const setTranslate = () => {
- const {
- slides,
- rtlTranslate: rtl
- } = swiper;
- const params = swiper.params.flipEffect;
- const rotateFix = getRotateFix(swiper);
- for (let i = 0; i < slides.length; i += 1) {
- const slideEl = slides[i];
- let progress = slideEl.progress;
- if (swiper.params.flipEffect.limitRotation) {
- progress = Math.max(Math.min(slideEl.progress, 1), -1);
- }
- const offset = slideEl.swiperSlideOffset;
- const rotate = -180 * progress;
- let rotateY = rotate;
- let rotateX = 0;
- let tx = swiper.params.cssMode ? -offset - swiper.translate : -offset;
- let ty = 0;
- if (!swiper.isHorizontal()) {
- ty = tx;
- tx = 0;
- rotateX = -rotateY;
- rotateY = 0;
- } else if (rtl) {
- rotateY = -rotateY;
- }
- slideEl.style.zIndex = -Math.abs(Math.round(progress)) + slides.length;
- if (params.slideShadows) {
- createSlideShadows(slideEl, progress);
- }
- const transform = `translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateFix(rotateX)}deg) rotateY(${rotateFix(rotateY)}deg)`;
- const targetEl = effectTarget(params, slideEl);
- targetEl.style.transform = transform;
- }
- };
- const setTransition = duration => {
- const transformElements = swiper.slides.map(slideEl => getSlideTransformEl(slideEl));
- transformElements.forEach(el => {
- el.style.transitionDuration = `${duration}ms`;
- el.querySelectorAll('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left').forEach(shadowEl => {
- shadowEl.style.transitionDuration = `${duration}ms`;
- });
- });
- effectVirtualTransitionEnd({
- swiper,
- duration,
- transformElements
- });
- };
- effectInit({
- effect: 'flip',
- swiper,
- on,
- setTranslate,
- setTransition,
- recreateShadows,
- getEffectParams: () => swiper.params.flipEffect,
- perspective: () => true,
- overwriteParams: () => ({
- slidesPerView: 1,
- slidesPerGroup: 1,
- watchSlidesProgress: true,
- spaceBetween: 0,
- virtualTranslate: !swiper.params.cssMode
- })
- });
- }
- export { EffectFlip as default };
|