swiper
Version:
Most modern mobile touch slider and framework with hardware accelerated transitions
2 lines • 2.28 kB
JavaScript
import{c as createShadow}from"../shared/create-shadow.min.mjs";import{e as effectInit}from"../shared/effect-init.min.mjs";import{e as effectTarget}from"../shared/effect-target.min.mjs";import{e as effectVirtualTransitionEnd}from"../shared/effect-virtual-transition-end.min.mjs";import{p as getSlideTransformEl,o as getRotateFix}from"../shared/utils.min.mjs";const EffectFlip=({swiper:e,extendParams:t,on:s})=>{function r(){return e.params.flipEffect}t({flipEffect:{slideShadows:!0,limitRotation:!0}});const a=(t,s)=>{let r=e.isHorizontal()?t.querySelector(".swiper-slide-shadow-left"):t.querySelector(".swiper-slide-shadow-top"),a=e.isHorizontal()?t.querySelector(".swiper-slide-shadow-right"):t.querySelector(".swiper-slide-shadow-bottom");r||(r=createShadow("flip",t,e.isHorizontal()?"left":"top")),a||(a=createShadow("flip",t,e.isHorizontal()?"right":"bottom")),r&&(r.style.opacity=String(Math.max(-s,0))),a&&(a.style.opacity=String(Math.max(s,0)))};effectInit({effect:"flip",swiper:e,on:s,setTranslate:()=>{const{slides:t,rtlTranslate:s}=e,i=r(),o=getRotateFix(e);for(let r=0;r<t.length;r+=1){const l=t[r];let n=l.progress??0;i.limitRotation&&(n=Math.max(Math.min(n,1),-1));const f=l.swiperSlideOffset??0;let d=-180*n,m=0,c=e.params.cssMode?-f-e.translate:-f,p=0;e.isHorizontal()?s&&(d=-d):(p=c,c=0,m=-d,d=0),l.style.zIndex=String(-Math.abs(Math.round(n))+t.length),i.slideShadows&&a(l,n);const h=`translate3d(${c}px, ${p}px, 0px) rotateX(${o(m)}deg) rotateY(${o(d)}deg)`;effectTarget(i,l).style.transform=h}},setTransition:t=>{const s=e.slides.map(e=>getSlideTransformEl(e));s.forEach(e=>{e.style.transitionDuration=`${t}ms`,e.querySelectorAll(".swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left").forEach(e=>{e.style.transitionDuration=`${t}ms`})}),effectVirtualTransitionEnd({swiper:e,duration:t,transformElements:s})},recreateShadows:()=>{const t=r();e.slides.forEach(e=>{let s=e.progress??0;t.limitRotation&&(s=Math.max(Math.min(s,1),-1)),a(e,s)})},getEffectParams:()=>e.params.flipEffect,perspective:()=>!0,overwriteParams:()=>({slidesPerView:1,slidesPerGroup:1,watchSlidesProgress:!0,spaceBetween:0,virtualTranslate:!e.params.cssMode})})};export{EffectFlip as default};
//# sourceMappingURL=effect-flip.min.mjs.map