swiper
Version:
Most modern mobile touch slider and framework with hardware accelerated transitions
2 lines • 3.41 kB
JavaScript
import{e as effectInit}from"../shared/effect-init.min.mjs";import{a as createElement,o as getRotateFix}from"../shared/utils.min.mjs";const EffectCube=({swiper:e,extendParams:t,on:s})=>{t({cubeEffect:{slideShadows:!0,shadow:!0,shadowOffset:20,shadowScale:.94}});const a=(e,t,s)=>{let a=s?e.querySelector(".swiper-slide-shadow-left"):e.querySelector(".swiper-slide-shadow-top"),r=s?e.querySelector(".swiper-slide-shadow-right"):e.querySelector(".swiper-slide-shadow-bottom");a||(a=createElement("div",("swiper-slide-shadow-cube swiper-slide-shadow-"+(s?"left":"top")).split(" ")),e.append(a)),r||(r=createElement("div",("swiper-slide-shadow-cube swiper-slide-shadow-"+(s?"right":"bottom")).split(" ")),e.append(r)),a&&(a.style.opacity=String(Math.max(-t,0))),r&&(r.style.opacity=String(Math.max(t,0)))};effectInit({effect:"cube",swiper:e,on:s,setTranslate:()=>{const{el:t,wrapperEl:s,slides:r,width:o,height:i,rtlTranslate:l,size:d}=e,n=getRotateFix(e),p=e.params.cubeEffect,c=e.isHorizontal(),h=!(!e.virtual||!e.params.virtual?.enabled);let w=0,f=null;p.shadow&&(c?(f=e.wrapperEl.querySelector(".swiper-cube-shadow"),f||(f=createElement("div","swiper-cube-shadow"),e.wrapperEl.append(f)),f.style.height=`${o}px`):(f=t.querySelector(".swiper-cube-shadow"),f||(f=createElement("div","swiper-cube-shadow"),t.append(f))));for(let e=0;e<r.length;e+=1){const t=r[e];let s=e;h&&(s=parseInt(t.getAttribute("data-swiper-slide-index")??"0",10));let o=90*s,i=Math.floor(o/360);l&&(o=-o,i=Math.floor(-o/360));const f=Math.max(Math.min(t.progress??0,1),-1);let m=0,u=0,y=0;s%4==0?(m=4*-i*d,y=0):(s-1)%4==0?(m=0,y=4*-i*d):(s-2)%4==0?(m=d+4*i*d,y=d):(s-3)%4==0&&(m=-d,y=3*d+4*d*i),l&&(m=-m),c||(u=m,m=0);const g=`rotateX(${n(c?0:-o)}deg) rotateY(${n(c?o:0)}deg) translate3d(${m}px, ${u}px, ${y}px)`;f<=1&&f>-1&&(w=90*s+90*f,l&&(w=90*-s-90*f)),t.style.transform=g,p.slideShadows&&a(t,f,c)}if(s.style.transformOrigin=`50% 50% -${d/2}px`,s.style.setProperty("-webkit-transform-origin",`50% 50% -${d/2}px`),p.shadow&&f)if(c)f.style.transform=`translate3d(0px, ${o/2+p.shadowOffset}px, ${-o/2}px) rotateX(89.99deg) rotateZ(0deg) scale(${p.shadowScale})`;else{const e=Math.abs(w)-90*Math.floor(Math.abs(w)/90),t=1.5-(Math.sin(2*e*Math.PI/360)/2+Math.cos(2*e*Math.PI/360)/2),s=p.shadowScale,a=p.shadowScale/t,r=p.shadowOffset;f.style.transform=`scale3d(${s}, 1, ${a}) translate3d(0px, ${i/2+r}px, ${-i/2/a}px) rotateX(-89.99deg)`}s.style.transform=`translate3d(0px,0,0px) rotateX(${n(e.isHorizontal()?0:w)}deg) rotateY(${n(e.isHorizontal()?-w:0)}deg)`,s.style.setProperty("--swiper-cube-translate-z","0px")},setTransition:t=>{const{el:s,slides:a}=e;if(a.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`})}),e.params.cubeEffect?.shadow&&!e.isHorizontal()){const e=s.querySelector(".swiper-cube-shadow");e&&(e.style.transitionDuration=`${t}ms`)}},recreateShadows:()=>{const t=e.isHorizontal();e.slides.forEach(e=>{const s=Math.max(Math.min(e.progress??0,1),-1);a(e,s,t)})},getEffectParams:()=>e.params.cubeEffect,perspective:()=>!0,overwriteParams:()=>({slidesPerView:1,slidesPerGroup:1,watchSlidesProgress:!0,resistanceRatio:0,spaceBetween:0,centeredSlides:!1,virtualTranslate:!0})})};export{EffectCube as default};
//# sourceMappingURL=effect-cube.min.mjs.map