swiper
Version:
Most modern mobile touch slider and framework with hardware accelerated transitions
2 lines • 5.48 kB
JavaScript
import{v as setCSSProperty,e as elementChildren,w as setInnerHTML,a as createElement}from"../shared/utils.min.mjs";const Virtual=({swiper:e,extendParams:t,on:s,emit:i})=>{let l,r;function a(){return e.params.virtual}t({virtual:{enabled:!1,slides:[],cache:!0,slidesPerViewAutoSlideSize:320,renderSlide:null,renderExternal:null,renderExternalUpdate:!0,addSlidesBefore:0,addSlidesAfter:0}}),e.virtual={cache:{},from:0,to:0,slides:[],offset:0,slidesGrid:[]};function d(t,s){const i=a();if(i.cache&&e.virtual.cache[s])return e.virtual.cache[s];let l;if(i.renderSlide){const a=i.renderSlide.call(e,t,s);if("string"==typeof a){const e=r??=document.createElement("div");setInnerHTML(e,a),l=e.children[0]}else l=a}else l=e.isElement?createElement("swiper-slide"):createElement("div",e.params.slideClass);return l.setAttribute("data-swiper-slide-index",String(s)),i.renderSlide||setInnerHTML(l,t),i.cache&&(e.virtual.cache[s]=l),l}function n(t,s,l){const{slidesPerGroup:r,centeredSlides:n,slidesPerView:o,loop:c,initialSlide:u}=e.params;if(s&&!c&&(u??0)>0)return;const{addSlidesBefore:f,addSlidesAfter:h,slidesPerViewAutoSlideSize:p}=a(),{from:v,to:m,slides:g,slidesGrid:S,offset:w}=e.virtual;e.params.cssMode||e.updateActiveIndex();const x=void 0===l?e.activeIndex||0:l;let E,b;if(E=e.rtlTranslate?"right":e.isHorizontal()?"left":"top","auto"===o)if(p){let t=e.size;t||(t=e.isHorizontal()?e.el.getBoundingClientRect().width:e.el.getBoundingClientRect().height),b=Math.max(1,Math.ceil(t/p))}else b=1;else b=o??1;const A=r??1;let M,y;n?(M=Math.floor(b/2)+A+h,y=Math.floor(b/2)+A+f):(M=b+(A-1)+h,y=(c?b:A)+f);let P=x-y,C=x+M;c||(P=Math.max(P,0),C=Math.min(C,g.length-1));let G=(e.slidesGrid[P]||0)-(e.slidesGrid[0]||0);function I(){e.updateSlides(),e.updateProgress(),e.updateSlidesClasses(),i("virtualUpdate")}if(c&&x>=y?(P-=y,n||(G+=e.slidesGrid[0])):c&&x<y&&(P=-y,n&&(G+=e.slidesGrid[0])),Object.assign(e.virtual,{from:P,to:C,offset:G,slidesGrid:e.slidesGrid,slidesBefore:y,slidesAfter:M}),v===P&&m===C&&!t)return e.slidesGrid!==S&&G!==w&&e.slides.forEach(t=>{t.style.setProperty(E,G-Math.abs(e.cssOverflowAdjustment())+"px")}),e.updateProgress(),void i("virtualUpdate");const T=a();if(T.renderExternal){const t=[];for(let e=P;e<=C;e+=1)t.push(g[e]);return T.renderExternal.call(e,{offset:G,from:P,to:C,slides:t}),void(T.renderExternalUpdate?I():i("virtualUpdate"))}const j=[],z=[],$=e=>{let t=e;return e<0?t=g.length+e:t>=g.length&&(t-=g.length),t};if(t)e.slides.filter(t=>t.matches(`.${e.params.slideClass}, swiper-slide`)).forEach(e=>{e.remove()});else for(let t=v;t<=m;t+=1)if(t<P||t>C){const s=$(t);e.slides.filter(t=>t.matches(`.${e.params.slideClass}[data-swiper-slide-index="${s}"], swiper-slide[data-swiper-slide-index="${s}"]`)).forEach(e=>{e.remove()})}const O=c?-g.length:0,V=c?2*g.length:g.length;for(let e=O;e<V;e+=1)if(e>=P&&e<=C){const s=$(e);void 0===m||t?z.push(s):(e>m&&z.push(s),e<v&&j.push(s))}if(z.forEach(t=>{e.slidesEl.append(d(g[t],t))}),c)for(let t=j.length-1;t>=0;t-=1){const s=j[t];e.slidesEl.prepend(d(g[s],s))}else j.sort((e,t)=>t-e),j.forEach(t=>{e.slidesEl.prepend(d(g[t],t))});elementChildren(e.slidesEl,".swiper-slide, swiper-slide").forEach(t=>{t.style.setProperty(E,G-Math.abs(e.cssOverflowAdjustment())+"px")}),I()}s("beforeInit",()=>{if(!a().enabled)return;let t=!1;const s=e.passedParams.virtual;if(!s||"object"!=typeof s||void 0===s.slides){const s=[...e.slidesEl.children].filter(t=>t.matches(`.${e.params.slideClass}, swiper-slide`));s&&s.length&&(e.virtual.slides=[...s],t=!0,s.forEach((t,s)=>{t.setAttribute("data-swiper-slide-index",String(s)),e.virtual.cache[s]=t,t.remove()}))}t||(e.virtual.slides=a().slides),e.classNames.push(`${e.params.containerModifierClass}virtual`),e.params.watchSlidesProgress=!0,e.originalParams.watchSlidesProgress=!0,n(!1,!0)}),s("setTranslate",()=>{a().enabled&&(e.params.cssMode&&!e._immediateVirtual?(clearTimeout(l),l=setTimeout(()=>{n()},100)):n())}),s("init update resize",()=>{a().enabled&&e.params.cssMode&&setCSSProperty(e.wrapperEl,"--swiper-virtual-size",`${e.virtualSize}px`)}),Object.assign(e.virtual,{appendSlide:function(t){if(null!==t&&"object"==typeof t&&"length"in t){const s=t;for(let t=0;t<s.length;t+=1)s[t]&&e.virtual.slides.push(s[t])}else e.virtual.slides.push(t);n(!0)},prependSlide:function(t){const s=e.activeIndex;let i=s+1,l=1;if(Array.isArray(t)){for(let s=0;s<t.length;s+=1)t[s]&&e.virtual.slides.unshift(t[s]);i=s+t.length,l=t.length}else e.virtual.slides.unshift(t);if(a().cache){const t=e.virtual.cache,s={};Object.keys(t).forEach(e=>{const i=t[Number(e)],r=i.getAttribute("data-swiper-slide-index");r&&i.setAttribute("data-swiper-slide-index",String(parseInt(r,10)+l)),s[parseInt(e,10)+l]=i}),e.virtual.cache=s}n(!0),e.slideTo(i,0)},removeSlide:function(t){if(null==t)return;let s=e.activeIndex;const i=t=>{Object.keys(e.virtual.cache).forEach(s=>{const i=Number(s);if(i>t){const t=e.virtual.cache[i];e.virtual.cache[i-1]=t,t.setAttribute("data-swiper-slide-index",String(i-1)),delete e.virtual.cache[i]}})};if(Array.isArray(t))for(let l=t.length-1;l>=0;l-=1)a().cache&&(delete e.virtual.cache[t[l]],i(t[l])),e.virtual.slides.splice(t[l],1),t[l]<s&&(s-=1),s=Math.max(s,0);else a().cache&&(delete e.virtual.cache[t],i(t)),e.virtual.slides.splice(t,1),t<s&&(s-=1),s=Math.max(s,0);n(!0),e.slideTo(s,0)},removeAllSlides:function(){e.virtual.slides=[],a().cache&&(e.virtual.cache={}),n(!0),e.slideTo(0,0)},update:n})};export{Virtual as default};
//# sourceMappingURL=virtual.min.mjs.map