https://swiperjs.com/_next/static/chunks/pages/migration-guide-v10-72e52c24cbb4d91a.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[629],{4584:(e,s,n)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/migration-guide-v10",function(){return n(8162)}])},8162:(e,s,n)=>{"use strict";n.r(s),n.d(s,{default:()=>d,meta:()=>r});var t=n(4848),a=n(8453),l=n(1086),i=n(8877);let r={title:"Migration Guide to Swiper 10"},c=function(e){let{children:s}=e,n={h1:l.A.h1,h2:l.A.h2,h3:l.A.h3,h4:l.A.h4};return(0,t.jsx)(a.x,{components:n,children:(0,t.jsx)(i.p,{meta:r,children:s})})};function o(e){let s={code:"code",h2:"h2",li:"li",p:"p",pre:"pre",span:"span",ul:"ul",...(0,a.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(s.h2,{id:"swiper-element-layout",children:"Swiper Element Layout"}),"\n",(0,t.jsxs)(s.p,{children:["Swiper Element now comes with additional ",(0,t.jsx)(s.code,{children:'<div class="swiper">'})," main element internal layout."]}),"\n",(0,t.jsx)(s.p,{children:"In v9:"}),"\n",(0,t.jsx)(s.pre,{className:"language-html",children:(0,t.jsxs)(s.code,{className:"language-html",children:[(0,t.jsxs)(s.span,{className:"token tag",children:[(0,t.jsxs)(s.span,{className:"token tag",children:[(0,t.jsx)(s.span,{className:"token punctuation",children:"<"}),"swiper-container"]}),(0,t.jsx)(s.span,{className:"token punctuation",children:">"})]}),"\n  ",(0,t.jsx)(s.span,{className:"token comment",children:"\x3c!-- shadow --\x3e"}),"\n  ",(0,t.jsxs)(s.span,{className:"token tag",children:[(0,t.jsxs)(s.span,{className:"token tag",children:[(0,t.jsx)(s.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,t.jsx)(s.span,{className:"token attr-name",children:"class"}),(0,t.jsxs)(s.span,{className:"token attr-value",children:[(0,t.jsx)(s.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(s.span,{className:"token punctuation",children:'"'}),"swiper-wrapper",(0,t.jsx)(s.span,{className:"token punctuation",children:'"'})]}),(0,t.jsx)(s.span,{className:"token punctuation",children:">"})]}),"\n    ",(0,t.jsxs)(s.span,{className:"token tag",children:[(0,t.jsxs)(s.span,{className:"token tag",children:[(0,t.jsx)(s.span,{className:"token punctuation",children:"<"}),"slot"]})," ",(0,t.jsx)(s.span,{className:"token punctuation",children:"/>"})]}),"\n  ",(0,t.jsxs)(s.span,{className:"token tag",children:[(0,t.jsxs)(s.span,{className:"token tag",children:[(0,t.jsx)(s.span,{className:"token punctuation",children:"</"}),"div"]}),(0,t.jsx)(s.span,{className:"token punctuation",children:">"})]}),"\n",(0,t.jsxs)(s.span,{className:"token tag",children:[(0,t.jsxs)(s.span,{className:"token tag",children:[(0,t.jsx)(s.span,{className:"token punctuation",children:"</"}),"swiper-container"]}),(0,t.jsx)(s.span,{className:"token punctuation",children:">"})]}),"\n"]})}),"\n",(0,t.jsx)(s.p,{children:"In v10:"}),"\n",(0,t.jsx)(s.pre,{className:"language-html",children:(0,t.jsxs)(s.code,{className:"language-html",children:[(0,t.jsxs)(s.span,{className:"token tag",children:[(0,t.jsxs)(s.span,{className:"token tag",children:[(0,t.jsx)(s.span,{className:"token punctuation",children:"<"}),"swiper-container"]}),(0,t.jsx)(s.span,{className:"token punctuation",children:">"})]}),"\n  ",(0,t.jsx)(s.span,{className:"token comment",children:"\x3c!-- shadow --\x3e"}),"\n  ",(0,t.jsxs)(s.span,{className:"token tag",children:[(0,t.jsxs)(s.span,{className:"token tag",children:[(0,t.jsx)(s.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,t.jsx)(s.span,{className:"token attr-name",children:"class"}),(0,t.jsxs)(s.span,{className:"token attr-value",children:[(0,t.jsx)(s.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(s.span,{className:"token punctuation",children:'"'}),"swiper",(0,t.jsx)(s.span,{className:"token punctuation",children:'"'})]}),(0,t.jsx)(s.span,{className:"token punctuation",children:">"})]}),"\n    ",(0,t.jsxs)(s.span,{className:"token tag",children:[(0,t.jsxs)(s.span,{className:"token tag",children:[(0,t.jsx)(s.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,t.jsx)(s.span,{className:"token attr-name",children:"class"}),(0,t.jsxs)(s.span,{className:"token attr-value",children:[(0,t.jsx)(s.span,{className:"token punctuation attr-equals",children:"="}),(0,t.jsx)(s.span,{className:"token punctuation",children:'"'}),"swiper-wrapper",(0,t.jsx)(s.span,{className:"token punctuation",children:'"'})]}),(0,t.jsx)(s.span,{className:"token punctuation",children:">"})]}),"\n      ",(0,t.jsxs)(s.span,{className:"token tag",children:[(0,t.jsxs)(s.span,{className:"token tag",children:[(0,t.jsx)(s.span,{className:"token punctuation",children:"<"}),"slot"]})," ",(0,t.jsx)(s.span,{className:"token punctuation",children:"/>"})]}),"\n    ",(0,t.jsxs)(s.span,{className:"token tag",children:[(0,t.jsxs)(s.span,{className:"token tag",children:[(0,t.jsx)(s.span,{className:"token punctuation",children:"</"}),"div"]}),(0,t.jsx)(s.span,{className:"token punctuation",children:">"})]}),"\n  ",(0,t.jsxs)(s.span,{className:"token tag",children:[(0,t.jsxs)(s.span,{className:"token tag",children:[(0,t.jsx)(s.span,{className:"token punctuation",children:"</"}),"div"]}),(0,t.jsx)(s.span,{className:"token punctuation",children:">"})]}),"\n",(0,t.jsxs)(s.span,{className:"token tag",children:[(0,t.jsxs)(s.span,{className:"token tag",children:[(0,t.jsx)(s.span,{className:"token punctuation",children:"</"}),"swiper-container"]}),(0,t.jsx)(s.span,{className:"token punctuation",children:">"})]}),"\n"]})}),"\n",(0,t.jsx)(s.p,{children:"So if you rely and do some tricks with shadow DOM 

1internals, you need to consider new layout."}),"\n",(0,t.jsx)(s.h2,{id:"swiper-element-styles",children:"Swiper Element Styles"}),"\n",(0,t.jsx)(s.p,{children:"Swiper web component doesn't inject global styles to document anymore. In this case if you will use custom navigation, pagination, scrollbar elements they will be not styled."}),"\n",(0,t.jsx)(s.h2,{id:"modules-imports",children:"Modules Imports"}),"\n",(0,t.jsxs)(s.p,{children:["For better tree-shaking all modules must be imported now from ",(0,t.jsx)(s.code,{children:"/swiper/modules"})]}),"\n",(0,t.jsx)(s.p,{children:"In v9:"}),"\n",(0,t.jsx)(s.pre,{className:"language-js",children:(0,t.jsxs)(s.code,{className:"language-js",children:[(0,t.jsx)(s.span,{className:"token keyword module",children:"import"})," ",(0,t.jsxs)(s.span,{className:"token imports",children:[(0,t.jsx)(s.span,{className:"token maybe-class-name",children:"Swiper"}),(0,t.jsx)(s.span,{className:"token punctuation",children:","})," ",(0,t.jsx)(s.span,{className:"token punctuation",children:"{"})," ",(0,t.jsx)(s.span,{className:"token maybe-class-name",children:"Navigation"}),(0,t.jsx)(s.span,{className:"token punctuation",children:","})," ",(0,t.jsx)(s.span,{className:"token maybe-class-name",children:"Pagination"})," ",(0,t.jsx)(s.span,{className:"token punctuation",children:"}"})]})," ",(0,t.jsx)(s.span,{className:"token keyword module",children:"from"})," ",(0,t.jsx)(s.span,{className:"token string",children:"'swiper'"}),(0,t.jsx)(s.span,{className:"token punctuation",children:";"}),"\n"]})}),"\n",(0,t.jsx)(s.p,{children:"In v10:"}),"\n",(0,t.jsx)(s.pre,{className:"language-js",children:(0,t.jsxs)(s.code,{className:"language-js",children:[(0,t.jsx)(s.span,{className:"token keyword module",children:"import"})," ",(0,t.jsx)(s.span,{className:"token imports",children:(0,t.jsx)(s.span,{className:"token maybe-class-name",children:"Swiper"})})," ",(0,t.jsx)(s.span,{className:"token keyword module",children:"from"})," ",(0,t.jsx)(s.span,{className:"token string",children:"'swiper'"}),(0,t.jsx)(s.span,{className:"token punctuation",children:";"}),"\n",(0,t.jsx)(s.span,{className:"token keyword module",children:"import"})," ",(0,t.jsxs)(s.span,{className:"token imports",children:[(0,t.jsx)(s.span,{className:"token punctuation",children:"{"})," ",(0,t.jsx)(s.span,{className:"token maybe-class-name",children:"Navigation"}),(0,t.jsx)(s.span,{className:"token punctuation",children:","})," ",(0,t.jsx)(s.span,{className:"token maybe-class-name",children:"Pagination"})," ",(0,t.jsx)(s.span,{className:"token punctuation",children:"}"})]})," ",(0,t.jsx)(s.span,{className:"token keyword module",children:"from"})," ",(0,t.jsx)(s.span,{className:"token string",children:"'swiper/modules'"}),(0,t.jsx)(s.span,{className:"token punctuation",children:";"}),"\n"]})}),"\n",(0,t.jsx)(s.h2,{id:"package-structure",children:"Package Structure"}),"\n",(0,t.jsx)(s.p,{children:"Main breaking change in v10 is the simplified package structure:"}),"\n",(0,t.jsxs)(s.ul,{children:["\n",(0,t.jsx)(s.li,{children:"most of the files (except modules) are now in the package root"}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:".esm.js"})," scripts replaced with ",(0,t.jsx)(s.code,{children:".mjs"})]}),"\n",(0,t.jsxs)(s.li,{children:[(0,t.jsx)(s.code,{children:".browser.esm.js"})," scripts are now same ",(0,t.jsx)(s.code,{children:".mjs"})]}),"\n"]}),"\n",(0,t.jsx)(s.p,{children:"You need to consider it if you import files directly. Here is the new package structure:"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{children:"/modules/\n/shared/\n/types/\n/package.json\n/swiper-bundle.css\n/swiper-bundle.js\n/swiper-bundle.min.css\n/swiper-bundle.min.js\n/swiper-bundle.min.js.map\n/swiper-bundle.min.mjs\n/swiper-bundle.min.mjs.map\n/swiper-bundle.mjs\n/swiper-element-bundle.js\n/swiper-element-bundle.min.js\n/swiper-element-bundle.min.js.map\n/swiper-element-bundle.min.mjs\n/swiper-element-bundle.min.mjs.map\n/swiper-element-bundle.mjs\n/swiper-element.d.ts\n/swiper-element.js\n/swiper-element.min.js\n/swiper-element.min.js.map\n/swiper-element.min.mjs\n/swiper-element.min.mjs.map\n/swiper-element.mjs\n/swiper-react.d.ts\n/swiper-react.mjs\n/swiper-vars.less\n/swiper-vars.scss\n/swiper-vue.d.ts\n/swiper-vue.mjs\n/swiper.css\n/swiper.d.ts\n/swiper.js\n/swiper.less\n/swiper.min.css\n/swiper.min.js\n/swiper.min.js.map\n/swiper.min.mjs\n/swiper.min.mjs.map\n/swiper.mjs\n/swiper.scss\n"})})]})}function d(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,t.jsx)(c,{...e,children:(0,t.jsx)(o,{...e})})}},8453:(e,s,n)=>{"use strict";n.d(s,{R:()=>i,x:()=>r});var t=n(6540);let a={},l=t.createContext(a);function i(e){let s=t.useContext(l);return t.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function r(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(a):e.components||a:i(e.components),t.createElement(l.Provider,{value:s},e.children)}},1086:(e,s,n)=>{"use strict";n.d(s,{A:()=>l});var t=n(4848),a=n(4164);function l(e){let{level:s,id:n,link:l=!0,children:i,number:r,className:c="",style:o={},...d}=e;return(0,t.jsxs)("h".concat(s),{className:(0,a.A)("group flex whitespace-pre-wrap",c),id:n,style:{...o},...d,children:[l&&(0,t.jsx)("a",{href:"#".concat(n),className:"after:hash absolute opacity-0 group-hover:opacity-100",style:{marginLeft:"-1em",paddingRight:"0.5em",color:"#a1a1aa",textDecoration:"none"},"aria-label":"Anchor"}),(0,t.jsx)("span",{children:i})]})}l.h1=e=>(0,t.jsx)(l,{level:1,...e}),l.h2=e=>(0,t.jsx)(l,{level:2,...e}),l.h3=e=>(0,t.jsx)(l,{level:3,...e}),l.h4=e=>(0,t.jsx)(l,{level:4,...e})},8877:(e,s,n)=>{"use strict";n.d(s,{p:()=>N});var t=n(4848),a=n(6540),l=n(6715),i=n(1106),r=n(3368),c=n(4164);let o=e=>{let[s,n]=(0,a.useState)(e),t=(0,a.useRef)([]),l=(0,a.useRef)(0),i=()=>{let e=document.querySelectorAll(".prose h2[id], .prose h3[id]");for(let s=0;s<e.length;s+=1){let n=e[s];t.current.push({el:n,id:n.id})}},r=()=>{let e=window.scrollY;l.current=window.innerHeight,t.current.forEach(s=>{let n=s.el.getBoundingClientRect();s.offset=e+n.top})},c=()=>{let e=t.current[0],s=window.scrollY,a=t.current.filter(e=>{let{offset:n}=e;return n>=s})[0];t.current.forEach(n=>{s+l.current/2>n.offset&&(e=n)}),t.current.indexOf(a)<t.current.indexOf(e)&&(e=a),e&&e.id&&n(e.id)},o=()=>{c()},d=()=>{r(),c()},p=()=>{window.addEventListener("scroll",o),window.addEventListener("resize",d)},m=()=>{window.removeEventListener("scroll",o),window.removeEventListener("resize",d)};return(0,a.useEffect)(()=>(i(),r(),c(),p(),()=>m()),[]),s};function d(e){let{tableOfContents:s,onClick:n}=e,l=o(s[0].slug);return(0,t.jsx)("ul",{className:"table-of-contents overflow-x-hidden shrink-0",onClick:n,children:s.map(e=>{let s=l===e.slug,n=e.children.findIndex(e=>{let{slug:s}=e;return s===l})>-1;return(0,t.jsxs)(a.Fragment,{children:[(0,t.jsx)("li",{className:"my-1",children:(0,t.jsx)("a",{href:"#".concat(e.slug),className:(0,

1c.A)("block rounded-full py-1.5 !text-on-surface-darker   !no-underline",{"hover:!text-on-surface-dark":!s,"!text-primary":n,"!text-primary":s}),children:e.title})}),e.children.map(e=>{let s=l===e.slug;return(0,t.jsx)("li",{className:"ml-2",children:(0,t.jsx)("a",{href:"#".concat(e.slug),className:(0,c.A)("block rounded-full px-3 py-1 !text-on-surface-darker !no-underline",{"hover:!text-on-surface-dark":!s,"!text-primary":s}),children:e.title})},e.slug)})]},e.slug)})})}var p=n(6033);let m=[...n(1061),...p],h=e=>e.startsWith("http")?e:"/images/sponsors/".concat(e);function u(){return window.__NO_SPONSORS__?null:(0,t.jsxs)("div",{className:"mb-4","data-sponsors":"",children:[(0,t.jsxs)("div",{className:"mb-2 flex items-center justify-between",children:[(0,t.jsx)("span",{children:"Sponsors"}),(0,t.jsx)("a",{href:"https://sponsors.nolimits4web.com",target:"_blank",className:"text-xs text-primary no-underline",children:"Become a sponsor"})]}),(0,t.jsx)("div",{className:"flex flex-wrap gap-1",children:m.filter(e=>{let{plan:s,active:n}=e;return"Sponsor"!==s&&n}).map((e,s)=>{let{link:n,title:a,image:l}=e;return(0,t.jsx)("a",{className:"flex items-center justify-center hover:opacity-80 bg-white",href:n,title:a+s,rel:"sponsored",target:"_blank",children:l&&(0,t.jsx)("img",{className:"h-7 w-7 object-contain lg:h-8 lg:w-8",alt:a,loading:"lazy",src:h(l)})},a)})})]})}let x=a.useLayoutEffect;var j=n(8578),w=n(1325),k=n(1773);function N(e){let{children:s,meta:n={},pageTitle:c="",beforePageTitle:o="",afterPageTitle:p=""}=e,m=(0,l.useRouter)(),h=(0,a.useRef)(null),[N,g]=(0,a.useState)([]),[f,b]=(0,a.useState)(!1);return x(()=>{let e;let s=[];return h.current.querySelectorAll("h2, h3").forEach(n=>{let t=n.getAttribute("id"),a=n.textContent.trim();e="h3"===n.nodeName.toLowerCase();let l={slug:t,title:a,children:[]};if(e){let e=Math.max(s.length-1,0);s[e]||(s[e]={children:[]}),s[e].children.push(l)}else s.push(l)}),g(s),()=>{}},[]),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(k.s,{withSidebar:!0}),(0,t.jsxs)("div",{id:n.containerId,className:"mx-auto flex w-full justify-between px-4 sm:px-6 md:px-8 relative",children:[n&&(0,t.jsxs)(r,{children:[(0,t.jsx)("title",{children:n.title},"title"),(0,t.jsx)("meta",{property:"og:title",content:n.title}),(0,t.jsx)("meta",{name:"twitter:title",content:n.title}),n.description&&(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("meta",{name:"description",content:n.description},"description"),(0,t.jsx)("meta",{property:"og:description",content:n.description},"og:description"),(0,t.jsx)("meta",{name:"twitter:description",content:n.description},"twitter:description")]})]}),(0,t.jsx)(j.$,{className:"!fixed bottom-4 right-4 z-40 lg:hidden bg-surface-1 border border-outline backdrop-blur-lg w-16 h-16",onClick:()=>b(!0),children:(0,t.jsx)("svg",{className:"h-6 w-6",xmlns:"http://www.w3.org/2000/svg",height:"24",viewBox:"0 -960 960 960",width:"24",fill:"currentColor",children:(0,t.jsx)("path",{d:"M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"})})}),(0,t.jsx)("div",{className:"fixed right-0 top-0 z-50 h-full w-full bg-black/40 lg:z-40 lg:!hidden ".concat(f?"block":"hidden"),onClick:()=>b(!1)}),(0,t.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(f?"block":"hidden"),children:(0,t.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,t.jsx)(u,{}),N.length>0&&(0,t.jsx)(d,{onClick:e=>{e.target&&e.target.closest("a")&&b(!1)},tableOfContents:N})]})}),(0,t.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:h,children:[o,(c||n.title)&&(0,t.jsx)("h1",{children:c||n.title}),p,s,(0,t.jsx)("div",{className:"mt-4 border-t border-outline pt-4 text-right text-sm",children:(0,t.jsx)(i,{href:"https://github.com/nolimits4web/swiper-website/edit/master/src/pages".concat(m.pathname,".mdx"),children:"Edit this page on GitHub"})})]}),(0,t.jsx)("div",{className:"hidden h-px w-[calc(256px+40px)] shrink-0 2xl:block"})]}),(0,t.jsx)(w.A,{})]})}}},e=>{var s=s=>e(e.s=s);e.O(0,[950,636,593,792],()=>s(4584)),_N_E=e.O()}]);