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