swiper
Version:
Most modern mobile touch slider and framework with hardware accelerated transitions
2 lines • 2.29 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{g as getSlideTransformEl,p as getRotateFix}from"../shared/utils.min.mjs";function EffectFlip({swiper:e,extendParams:t,on:s}){t({flipEffect:{slideShadows:!0,limitRotation:!0}});const a=(t,s)=>{let a=e.isHorizontal()?t.querySelector(".swiper-slide-shadow-left"):t.querySelector(".swiper-slide-shadow-top"),r=e.isHorizontal()?t.querySelector(".swiper-slide-shadow-right"):t.querySelector(".swiper-slide-shadow-bottom");a||(a=createShadow("flip",t,e.isHorizontal()?"left":"top")),r||(r=createShadow("flip",t,e.isHorizontal()?"right":"bottom")),a&&(a.style.opacity=Math.max(-s,0)),r&&(r.style.opacity=Math.max(s,0))};effectInit({effect:"flip",swiper:e,on:s,setTranslate:()=>{const{slides:t,rtlTranslate:s}=e,r=e.params.flipEffect,i=getRotateFix(e);for(let o=0;o<t.length;o+=1){const l=t[o];let f=l.progress;e.params.flipEffect.limitRotation&&(f=Math.max(Math.min(l.progress,1),-1));const n=l.swiperSlideOffset;let p=-180*f,d=0,m=e.params.cssMode?-n-e.translate:-n,c=0;e.isHorizontal()?s&&(p=-p):(c=m,m=0,d=-p,p=0),l.style.zIndex=-Math.abs(Math.round(f))+t.length,r.slideShadows&&a(l,f);const h=`translate3d(${m}px, ${c}px, 0px) rotateX(${i(d)}deg) rotateY(${i(p)}deg)`;effectTarget(r,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:()=>{e.params.flipEffect,e.slides.forEach(t=>{let s=t.progress;e.params.flipEffect.limitRotation&&(s=Math.max(Math.min(t.progress,1),-1)),a(t,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