https://swiperjs.com/_next/static/chunks/pages/premium-guide-e3f0060943742aaa.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[36],{4112:(e,t,i)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/premium-guide",function(){return i(3702)}])},3702:(e,t,i)=>{"use strict";i.r(t),i.d(t,{default:()=>p,meta:()=>o});var r=i(4848),s=i(8453),n=i(1086),l=i(8877);function a(e){let{slug:t,title:i,description:s}=e,n="https://uiinitiative.com/items/".concat(t,"/cover.jpg"),l="https://uiinitiative.com/catalog/".concat(t);return(0,r.jsxs)("a",{href:l,target:"_blank",rel:"noopener noreferrer",className:"flex items-start gap-4 p-3 rounded-lg bg-surface-1 border border-outline hover:bg-white/15 transition-colors !no-underline group active:bg-white/10",children:[(0,r.jsx)("img",{src:n,alt:i,className:"w-32 h-16 sm:w-40 sm:h-20 object-cover !rounded-sm shrink-0 border border-outline",loading:"lazy"}),(0,r.jsxs)("div",{className:"flex flex-col",children:[(0,r.jsx)("div",{className:"font-semibold text-on-surface  transition-colors !no-underline",children:i}),(0,r.jsx)("div",{className:"text-on-surface-dark text-sm mt-1 !no-underline",children:s})]})]})}function d(e){let{children:t}=e;return(0,r.jsx)("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4 my-4",children:t})}let o={title:"Premium Solutions Guide"},c=function(e){let{children:t}=e,i={h1:n.A.h1,h2:n.A.h2,h3:n.A.h3,h4:n.A.h4};return(0,r.jsx)(s.x,{components:i,children:(0,r.jsx)(l.p,{meta:o,children:t})})};function h(e){let t={code:"code",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,s.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.p,{children:"Swiper's free, open-source library handles most slider needs. When you need advanced effects, production-ready templates, or want to save significant development time, our premium solutions can help."}),"\n",(0,r.jsx)(t.h2,{id:"free-vs-premium-comparison",children:"Free vs Premium Comparison"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{children:"Use Case"}),(0,r.jsx)(t.th,{children:"Free Solution"}),(0,r.jsx)(t.th,{children:"Premium Solution"}),(0,r.jsx)(t.th,{children:"Time Saved"})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.strong,{children:"Tinder-style cards"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"effect: 'cards'"})}),(0,r.jsxs)(t.td,{children:[(0,r.jsx)("a",{href:"https://uiinitiative.com/catalog/tinder-slider",target:"_blank",children:"Tinder Slider"})," - adds swipe direction detection, tinderSwipe event"]}),(0,r.jsx)(t.td,{children:"20-30 hrs"})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.strong,{children:"Instagram stories"})}),(0,r.jsx)(t.td,{children:"Autoplay + custom CSS"}),(0,r.jsxs)(t.td,{children:[(0,r.jsx)("a",{href:"https://uiinitiative.com/catalog/stories-slider",target:"_blank",children:"Stories Slider"})," - progress bars, pause on touch, video support"]}),(0,r.jsx)(t.td,{children:"25-35 hrs"})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.strong,{children:"WebGL transitions"})}),(0,r.jsx)(t.td,{children:"Not available"}),(0,r.jsxs)(t.td,{children:[(0,r.jsx)("a",{href:"https://uiinitiative.com/catalog/shaders-slider",target:"_blank",children:"Shaders Slider"})," - 20+ GPU-accelerated shader effects"]}),(0,r.jsx)(t.td,{children:"40-60 hrs"})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.strong,{children:"3D carousel"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"effect: 'coverflow'"})}),(0,r.jsxs)(t.td,{children:[(0,r.jsx)("a",{href:"https://uiinitiative.com/catalog/carousel-slider",target:"_blank",children:"Carousel Slider"})," - true infinite 3D rotation"]}),(0,r.jsx)(t.td,{children:"15-20 hrs"})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.strong,{children:"Parallax transitions"})}),(0,r.jsx)(t.td,{children:"Parallax module"}),(0,r.jsxs)(t.td,{children:[(0,r.jsx)("a",{href:"https://uiinitiative.com/catalog/shutters-slider",target:"_blank",children:"Shutters Slider"}),", ",(0,r.jsx)("a",{href:"https://uiinitiative.com/catalog/expo-slider",target:"_blank",children:"Expo Slider"})," - advanced parallax effects"]}),(0,r.jsx)(t.td,{children:"10-20 hrs"})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.strong,{children:"Card stack with flip"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"effect: 'flip'"})}),(0,r.jsxs)(t.td,{children:[(0,r.jsx)("a",{href:"https://uiinitiative.com/catalog/cards-stack-slider",target:"_blank",children:"Cards Stack"})," - front/back card sides"]}),(0,r.jsx)(t.td,{children:"15-20 hrs"})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.strong,{children:"Material Design"})}),(0,r.jsx)(t.td,{children:"Custom CSS"}),(0,r.jsxs)(t.td,{children:[(0,r.jsx)("a",{href:"https://uiinitiative.com/catalog/material-you-slider",target:"_blank",children:"Material You Slider"})," - official Google M3 design"]}),(0,r.jsx)(t.td,{children:"15-20 hrs"})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.strong,{children:"E-commerce showcase"})}),(0,r.jsx)(t.td,{children:"Thumbs module"}),(0,r.jsxs)(t.td,{children:[(0,r.jsx)("a",{href:"https://uiinitiative.com/catalog/fashion-slider",target:"_blank",children:"Fashion Slider"})," - designed for product pages"]}),(0,r.jsx)(t.td,{children:"10-15 hrs"})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.strong,{children:"App onboarding"})}),(0,r.jsx)(t.td,{children:"Basic slides"}),(0,r.jsxs)(t.td,{children:[(0,r.jsx)("a",{href:"https://uiinitiative.com/catalog/paper-onboarding",target:"_blank",children:"Paper Onboarding"})," - Material design walkthrough"]}),(0,r.jsx)(t.td,{children:"10-15 hrs"})]})]})]}),"\n",(0,r.jsx)(t.h2,{id:"premium-effects-by-category",children:"Premium Effects by Category"}),"\n",(0,r.jsx)(t.h3,{id:"webgl--advanced-transitions",children:"WebGL & Advanced Transitions"}),"\n",(0,r.jsxs)(d,{children:[(0,r.jsx)(a,{slug:"shaders-slider",title:"Shaders Slider",description:"WebGL/GLSL GPU-accelerated transitions: morph, wave, ripple, pixelize, page-curl, and 15+ more effects."}),(0,r.jsx)(a,{slug:"super-flow",title:"Super Flow",description:"Fractures slides into dynamic triangle fragments with parallax scaling."})]}),"\n",(0,r.jsx)(t.h3,{id:"card-based-interfaces",children:"Card-Based Interfaces"}),"\n",(0,r.jsxs)(d,{children:[(0,r.jsx)(a,{slug:"tinder-slider",title:"Tinder Slider",description:"Swipe cards with direction detection (left/right) and tinderSwipe callback event."}),(0,r.jsx)(a,{slug:"cards-stack-slider",title:"Cards Stack Slider",description:"Cards with front and back sides, perfect for flashcards or product reveals."}),(0,r.jsx)(a,{slug:"expanding-collection",title:"Expanding Collection",description:"Cards that expand to reveal hidden content."}),(0,r.jsx)(a,{slug:"posters-slider",title:"Posters Slider",description:"Fancy card transitions for movie/poster galleries."})]}),"\n",(0,r.jsx)(t.h3,{id:"3d-effects",children:"3D Effects"}),"\n",(0,r.jsxs)(d,{children:[(0,r.jsx)(a,{slug:"carousel-slider",title:"Carousel Slider",description:"True 3D carousel with perspective rotation. Works best with 5+ slides."}),(0,r.jsx)(a,{slug:"panorama-slider",title:"Panorama Slider",description:"3D curved panorama effect with configurable depth."}),(0,r.jsx)(a,{slug:"swiper-3d-slicer",title:"3D Slicer",description:"Unique multi-layer 3D slicing effect."}),(0,r.jsx)(a,{slug:"swiper-3d-pagination",title:"3D Pagination",description:"Unique 3D pagination for Cube and Coverflow effects."})]}),"\n",(0,r.jsx)(t.h3,{id:"parallax--transitions",children:"Parallax & Transitions"}),"\n",(0,r.jsxs)(d,{children:[(0,r.jsx)(a,{slug:"shutters-slider",title:"Shutters Slider",description:"Venetian blinds/shutter parallax effect."}),(0,r.jsx)(a,{slug:"expo-slider",title:"Expo Slider",description:"Parallax with scale effects and grayscale side slides."}),(0,r.jsx)(a,{slug:"slicer-slider",title:"Slicer Slider",description:"Image slicer with configurable number of slices."}),(0,r.jsx)(a,{slug:"spring-slider",title:"Spring Slider",description:"Spring physics animation transitions."})]}),"\n",(0,r.jsx)(t.h3,{id:"social--content",children:"Social & Content"}),"\n",(0,r.jsxs)(d,{children:[(0,r.jsx)(a,{slug:"stories-slider",title:"Stories Slider",description:"Instagram/Snapchat-style stories with progress bars, pause on touch, and video supp

1ort."}),(0,r.jsx)(a,{slug:"triple-slider",title:"Triple Slider",description:"Three synchronized swipers showing previous/current/next."})]}),"\n",(0,r.jsx)(t.h3,{id:"design-system-templates",children:"Design System Templates"}),"\n",(0,r.jsxs)(d,{children:[(0,r.jsx)(a,{slug:"material-you-slider",title:"Material You Slider",description:"Google's Material You (M3) Carousel design."}),(0,r.jsx)(a,{slug:"paper-onboarding",title:"Paper Onboarding",description:"Material design app onboarding/walkthrough."}),(0,r.jsx)(a,{slug:"fashion-slider",title:"Fashion Slider",description:"E-commerce product showcase template."}),(0,r.jsx)(a,{slug:"travel-slider",title:"Travel Slider",description:"Rotating globe animation for travel sites."})]}),"\n",(0,r.jsx)(t.h2,{id:"swiper-studio",children:"Swiper Studio"}),"\n",(0,r.jsxs)(t.p,{children:["Don't want to write code? ",(0,r.jsx)("a",{href:"https://studio.swiperjs.com",target:"_blank",children:(0,r.jsx)(t.strong,{children:"Swiper Studio"})})," is a visual builder that lets you create production-ready sliders and export to HTML, React, or Vue. Many premium effects are included."]}),"\n",(0,r.jsx)(t.p,{children:(0,r.jsx)(t.img,{src:"/images/swiper-studio-banner.jpg",alt:"Swiper Studio"})}),"\n",(0,r.jsx)(t.h2,{id:"frequently-asked-questions",children:"Frequently Asked Questions"}),"\n",(0,r.jsx)(t.h3,{id:"how-do-i-create-a-tinder-like-swipe-interface",children:"How do I create a Tinder-like swipe interface?"}),"\n",(0,r.jsxs)(t.p,{children:["The free ",(0,r.jsx)(t.code,{children:"cards"})," effect provides the visual card stack. For production Tinder-style interfaces with swipe direction detection (like/dislike), the ",(0,r.jsx)("a",{href:"https://uiinitiative.com/catalog/tinder-slider",target:"_blank",children:"Tinder Slider"})," premium plugin adds the tinderSwipe event with direction callbacks."]}),"\n",(0,r.jsx)(t.h3,{id:"how-do-i-create-instagram-stories",children:"How do I create Instagram Stories?"}),"\n",(0,r.jsxs)(t.p,{children:["You can build a basic stories interface with Autoplay, the Cube effect, and custom CSS. For a production-ready solution with progress bars, pause-on-touch, and video duration sync, use the ",(0,r.jsx)("a",{href:"https://uiinitiative.com/catalog/stories-slider",target:"_blank",children:"Stories Slider"})," premium plugin."]}),"\n",(0,r.jsx)(t.h3,{id:"whats-the-best-slider-for-high-end-marketing-websites",children:"What's the best slider for high-end marketing websites?"}),"\n",(0,r.jsxs)(t.p,{children:["The ",(0,r.jsx)("a",{href:"https://uiinitiative.com/catalog/shaders-slider",target:"_blank",children:"Shaders Slider"})," provides WebGL-based transitions that are impossible to achieve with CSS alone. Effects like morph, wave, ripple, and page-curl create memorable experiences."]}),"\n",(0,r.jsx)(t.h3,{id:"how-do-i-create-a-true-3d-carousel",children:"How do I create a true 3D carousel?"}),"\n",(0,r.jsxs)(t.p,{children:["The free Coverflow effect provides a 3D-like appearance. For true 3D perspective rotation, use ",(0,r.jsx)("a",{href:"https://uiinitiative.com/catalog/carousel-slider",target:"_blank",children:"Carousel Slider"})," or ",(0,r.jsx)("a",{href:"https://uiinitiative.com/catalog/panorama-slider",target:"_blank",children:"Panorama Slider"}),"."]}),"\n",(0,r.jsx)(t.h3,{id:"what-slider-should-i-use-for-e-commerce-product-pages",children:"What slider should I use for e-commerce product pages?"}),"\n",(0,r.jsxs)(t.p,{children:["Start with the free Thumbs module for thumbnail galleries. For a complete product showcase template, the ",(0,r.jsx)("a",{href:"https://uiinitiative.com/catalog/fashion-slider",target:"_blank",children:"Fashion Slider"})," is designed specifically for e-commerce."]}),"\n",(0,r.jsx)(t.h3,{id:"can-i-use-premium-effects-with-reactvue",children:"Can I use premium effects with React/Vue?"}),"\n",(0,r.jsxs)(t.p,{children:["Many premium plugins include React and Vue components. For those that don't, converting vanilla JS to React/Vue/Swiper Element is straightforward. ",(0,r.jsx)("a",{href:"https://uiinitiative.com",target:"_blank",children:"UI Initiative support"})," is always happy to help, and ",(0,r.jsx)("a",{href:"/swiper-mcp",children:"Swiper's MCP"})," can assist with conversions as well."]}),"\n",(0,r.jsx)(t.h3,{id:"what-if-i-dont-want-to-write-code",children:"What if I don't want to write code?"}),"\n",(0,r.jsx)("a",{href:"https://studio.swiperjs.com",target:"_blank",children:(0,r.jsx)(t.p,{children:"Swiper Studio"})}),"\n",(0,r.jsx)(t.p,{children:"lets you visually build sliders and export production-ready code for HTML,\nReact, or Vue."}),"\n",(0,r.jsx)(t.h2,{id:"support-swiper-development",children:"Support Swiper Development"}),"\n",(0,r.jsxs)(t.p,{children:["Swiper is free and open-source, developed and maintained by ",(0,r.jsx)("a",{href:"https://nolimits4web.com",target:"_blank",children:"nolimits4web"}),"."]}),"\n",(0,r.jsx)(t.p,{children:"If Swiper has been helpful for your projects, consider supporting continued development:"}),"\n",(0,r.jsxs)(t.ul,{children:["\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)("a",{href:"https://sponsors.nolimits4web.com",target:"_blank",children:(0,r.jsx)(t.strong,{children:"Sponsor Swiper"})})," - Get your logo and link featured on the Swiper website"]}),"\n",(0,r.jsxs)(t.li,{children:[(0,r.jsx)("a",{href:"https://github.com/sponsors/nolimits4web",target:"_blank",children:(0,r.jsx)(t.strong,{children:"GitHub Sponsors"})})," - Support the developer directly"]}),"\n"]})]})}function p(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,r.jsx)(c,{...e,children:(0,r.jsx)(h,{...e})})}},8453:(e,t,i)=>{"use strict";i.d(t,{R:()=>l,x:()=>a});var r=i(6540);let s={},n=r.createContext(s);function l(e){let t=r.useContext(n);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function a(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),r.createElement(n.Provider,{value:t},e.children)}},1086:(e,t,i)=>{"use strict";i.d(t,{A:()=>n});var r=i(4848),s=i(4164);function n(e){let{level:t,id:i,link:n=!0,children:l,number:a,className:d="",style:o={},...c}=e;return(0,r.jsxs)("h".concat(t),{className:(0,s.A)("group flex whitespace-pre-wrap",d),id:i,style:{...o},...c,children:[n&&(0,r.jsx)("a",{href:"#".concat(i),className:"after:hash absolute opacity-0 group-hover:opacity-100",style:{marginLeft:"-1em",paddingRight:"0.5em",color:"#a1a1aa",textDecoration:"none"},"aria-label":"Anchor"}),(0,r.jsx)("span",{children:l})]})}n.h1=e=>(0,r.jsx)(n,{level:1,...e}),n.h2=e=>(0,r.jsx)(n,{level:2,...e}),n.h3=e=>(0,r.jsx)(n,{level:3,...e}),n.h4=e=>(0,r.jsx)(n,{level:4,...e})},8877:(e,t,i)=>{"use strict";i.d(t,{p:()=>w});var r=i(4848),s=i(6540),n=i(6715),l=i(1106),a=i(3368),d=i(4164);let o=e=>

1{let[t,i]=(0,s.useState)(e),r=(0,s.useRef)([]),n=(0,s.useRef)(0),l=()=>{let e=document.querySelectorAll(".prose h2[id], .prose h3[id]");for(let t=0;t<e.length;t+=1){let i=e[t];r.current.push({el:i,id:i.id})}},a=()=>{let e=window.scrollY;n.current=window.innerHeight,r.current.forEach(t=>{let i=t.el.getBoundingClientRect();t.offset=e+i.top})},d=()=>{let e=r.current[0],t=window.scrollY,s=r.current.filter(e=>{let{offset:i}=e;return i>=t})[0];r.current.forEach(i=>{t+n.current/2>i.offset&&(e=i)}),r.current.indexOf(s)<r.current.indexOf(e)&&(e=s),e&&e.id&&i(e.id)},o=()=>{d()},c=()=>{a(),d()},h=()=>{window.addEventListener("scroll",o),window.addEventListener("resize",c)},p=()=>{window.removeEventListener("scroll",o),window.removeEventListener("resize",c)};return(0,s.useEffect)(()=>(l(),a(),d(),h(),()=>p()),[]),t};function c(e){let{tableOfContents:t,onClick:i}=e,n=o(t[0].slug);return(0,r.jsx)("ul",{className:"table-of-contents overflow-x-hidden shrink-0",onClick:i,children:t.map(e=>{let t=n===e.slug,i=e.children.findIndex(e=>{let{slug:t}=e;return t===n})>-1;return(0,r.jsxs)(s.Fragment,{children:[(0,r.jsx)("li",{className:"my-1",children:(0,r.jsx)("a",{href:"#".concat(e.slug),className:(0,d.A)("block rounded-full py-1.5 !text-on-surface-darker   !no-underline",{"hover:!text-on-surface-dark":!t,"!text-primary":i,"!text-primary":t}),children:e.title})}),e.children.map(e=>{let t=n===e.slug;return(0,r.jsx)("li",{className:"ml-2",children:(0,r.jsx)("a",{href:"#".concat(e.slug),className:(0,d.A)("block rounded-full px-3 py-1 !text-on-surface-darker !no-underline",{"hover:!text-on-surface-dark":!t,"!text-primary":t}),children:e.title})},e.slug)})]},e.slug)})})}var h=i(6033);let p=[...i(1061),...h],u=e=>e.startsWith("http")?e:"/images/sponsors/".concat(e);function x(){return window.__NO_SPONSORS__?null:(0,r.jsxs)("div",{className:"mb-4","data-sponsors":"",children:[(0,r.jsxs)("div",{className:"mb-2 flex items-center justify-between",children:[(0,r.jsx)("span",{children:"Sponsors"}),(0,r.jsx)("a",{href:"https://sponsors.nolimits4web.com",target:"_blank",className:"text-xs text-primary no-underline",children:"Become a sponsor"})]}),(0,r.jsx)("div",{className:"flex flex-wrap gap-1",children:p.filter(e=>{let{plan:t,active:i}=e;return"Sponsor"!==t&&i}).map((e,t)=>{let{link:i,title:s,image:n}=e;return(0,r.jsx)("a",{className:"flex items-center justify-center hover:opacity-80 bg-white",href:i,title:s+t,rel:"sponsored",target:"_blank",children:n&&(0,r.jsx)("img",{className:"h-7 w-7 object-contain lg:h-8 lg:w-8",alt:s,loading:"lazy",src:u(n)})},s)})})]})}let m=s.useLayoutEffect;var g=i(8578),j=i(1325),f=i(1773);function w(e){let{children:t,meta:i={},pageTitle:d="",beforePageTitle:o="",afterPageTitle:h=""}=e,p=(0,n.useRouter)(),u=(0,s.useRef)(null),[w,b]=(0,s.useState)([]),[v,S]=(0,s.useState)(!1);return m(()=>{let e;let t=[];return u.current.querySelectorAll("h2, h3").forEach(i=>{let r=i.getAttribute("id"),s=i.textContent.trim();e="h3"===i.nodeName.toLowerCase();let n={slug:r,title:s,children:[]};if(e){let e=Math.max(t.length-1,0);t[e]||(t[e]={children:[]}),t[e].children.push(n)}else t.push(n)}),b(t),()=>{}},[]),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(f.s,{withSidebar:!0}),(0,r.jsxs)("div",{id:i.containerId,className:"mx-auto flex w-full justify-between px-4 sm:px-6 md:px-8 relative",children:[i&&(0,r.jsxs)(a,{children:[(0,r.jsx)("title",{children:i.title},"title"),(0,r.jsx)("meta",{property:"og:title",content:i.title}),(0,r.jsx)("meta",{name:"twitter:title",content:i.title}),i.description&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("meta",{name:"description",content:i.description},"description"),(0,r.jsx)("meta",{property:"og:description",content:i.description},"og:description"),(0,r.jsx)("meta",{name:"twitter:description",content:i.description},"twitter:description")]})]}),(0,r.jsx)(g.$,{className:"!fixed bottom-4 right-4 z-40 lg:hidden bg-surface-1 border border-outline backdrop-blur-lg w-16 h-16",onClick:()=>S(!0),children:(0,r.jsx)("svg",{className:"h-6 w-6",xmlns:"http://www.w3.org/2000/svg",height:"24",viewBox:"0 -960 960 960",width:"24",fill:"

1currentColor",children:(0,r.jsx)("path",{d:"M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"})})}),(0,r.jsx)("div",{className:"fixed right-0 top-0 z-50 h-full w-full bg-black/40 lg:z-40 lg:!hidden ".concat(v?"block":"hidden"),onClick:()=>S(!1)}),(0,r.jsx)("div",{className:"fixed left-2 top-2 bottom-2 z-50 mr-10 h-[calc(100vh-16px)] w-64 flex-none text-sm lg:relative lg:z-40 lg:left-0 lg:-top-34 lg:!block lg:h-auto lg:rounded-none ".concat(v?"block":"hidden"),children:(0,r.jsxs)("div",{className:"h-full overflow-y-auto overscroll-contain p-4 lg:sticky lg:top-4 bg-surface-1 border rounded-3xl border-outline  backdrop-blur-2xl flex flex-col lg:h-[calc(100vh-32px)]",children:[(0,r.jsx)(x,{}),w.length>0&&(0,r.jsx)(c,{onClick:e=>{e.target&&e.target.closest("a")&&S(!1)},tableOfContents:w})]})}),(0,r.jsxs)("div",{className:"dark:prose-dark prose mx-auto min-w-0 max-w-none flex-auto pb-8 pt-10 2xl:max-w-[940px]",ref:u,children:[o,(d||i.title)&&(0,r.jsx)("h1",{children:d||i.title}),h,t,(0,r.jsx)("div",{className:"mt-4 border-t border-outline pt-4 text-right text-sm",children:(0,r.jsx)(l,{href:"https://github.com/nolimits4web/swiper-website/edit/master/src/pages".concat(p.pathname,".mdx"),children:"Edit this page on GitHub"})})]}),(0,r.jsx)("div",{className:"hidden h-px w-[calc(256px+40px)] shrink-0 2xl:block"})]}),(0,r.jsx)(j.A,{})]})}}},e=>{var t=t=>e(e.s=t);e.O(0,[950,636,593,792],()=>t(4112)),_N_E=e.O()}]);