demo.js

function SwiperAccordionPlugin(){let e=0,t=150;const i=function(e){const{width:i,height:s,wrapperEl:a}=e,l=e.params.accordionEffect;if(!isNaN(l.slideAspect)){const e=(i-(t+l.gap)*(l.slidesShow-1))/l.slideAspect;a.style.height=`${e}px`}},s=function(e){const t=e.params.accordionEffect.collapsedWidth;if("number"==typeof t)return t;if("string"==typeof t&&t.endsWith("%")){return(e.width||e.wrapperEl.getBoundingClientRect().width)*(parseFloat(t)/100)}throw new Error("Invalid parameter: collapsedWidth")};return function({swiper:a,extendParams:l,on:n}){l({accordionEffect:{slideAspect:"auto",collapsedWidth:t,gap:30,slidesShow:3,ease:"ease-in-out"}}),n("beforeInit",(e=>{t=s(e),i(e)})),n("init",(e=>{t=s(e),i(e)})),n("resize",(e=>{t=s(e),i(e)})),n("activeIndexChange",(function(e){e.clickedIndex=void 0})),n("progress",(function(t,i){e=Math.round((t.slides.length-1)*i)})),n("setTransition",(function(e,t){const{width:i,height:s,slides:a,swipeDirection:l}=e,{ease:n}=e.params.accordionEffect;for(let e=0,i=a.length;e<i;e++){a[e].style.transition=`all ${t}ms ${n}`}})),n("setTranslate",(function(i,s){const{width:a,height:l,slides:n,swipeDirection:p}=i,o=i.params.accordionEffect,r=a-(t+o.gap)*(o.slidesShow-1);let d=o.slidesShow;const c=()=>{d--};for(let i=0,s=n.length;i<s;i++){const s=n[i],a=i-e;i===e?(s.style.width=`${r}px`,s.style.margin=0,c()):a<0&&(Math.abs(a)<=(o.slidesShow-1)/2||n.length-i<=o.slidesShow)?(s.style.width=`${t}px`,s.style.marginRight=`${o.gap}px`,s.style.marginLeft=0,c()):a>0&&d>=1?(s.style.width=`${t}px`,s.style.marginLeft=`${o.gap}px`,s.style.marginRight=0,c()):(s.style.width=0,s.style.margin=0)}}))}}function render(){$("#input-slideAspect-auto").prop("checked")?($(".input-slideAspect-num").hide(),$("#value-slideAspect").text("auto")):($(".input-slideAspect-num").show(),$("#value-slideAspect").text($("#input-slideAspect-w").val()+"/"+$("#input-slideAspect-h").val())),$("#value-slidesShow").text($("#input-slidesShow").val()),$("#value-gap").text($("#input-gap").val());let e="pc"==$("#collapsedWidth-unit").val()?"%":"px";const t=$("#input-collapsedWidth");t.attr("max","%"==e?30:200),$("#value-collapsedWidth").text(t.val()+e),$("#value-autoplay").text($("#input-autoplay").prop("checked")?"true 5s":"false")}handleVPChange=e=>{$("#swiper-wrapper").removeClass("vp-desktop vp-laptop vp-tablet ").addClass("vp-"+e.value)};let swiper=null;function initSwiper(){swiper&&swiper.destroy();let e=parseInt($("#input-collapsedWidth").val());"pc"==$("#collapsedWidth-unit").val()&&(e=`${e}%`);let t="auto";$("#input-slideAspect-auto").prop("checked")?$(".swiper").css("height","100%"):(t=parseInt($("#input-slideAspect-w").val())/parseInt($("#input-slideAspect-h").val()),$(".swiper").css("height","auto"));const i={modules:[SwiperAccordionPlugin()],effect:"accordion",accordionEffect:{slideAspect:t,collapsedWidth:e,gap:parseInt($("#input-gap").val()),slidesShow:parseInt($("#input-slidesShow").val()),ease:"ease-in-out"},watchSlidesProgress:!0,virtualTranslate:!0,loop:!1,slideToClickedSlide:!0,allowTouchMove:!1,navigation:{nextEl:".swiper-button-next",prevEl:".swiper-button-prev"}};$("#input-autoplay").prop("checked")&&(i.autoplay={delay:5e3,pauseOnMouseEnter:!0,waitForTransition:!1}),swiper=new Swiper(".swiper",i)}render(),initSwiper();