https://swiperjs.com/_next/static/chunks/pages/migration-guide-v9-2216f2d9ebaa1f8d.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[95],{982:(e,t,n)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/migration-guide-v9",function(){return n(8336)}])},8336:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>d,meta:()=>o});var r=n(4848),l=n(8453),i=n(1086),s=n(8877);let o={title:"Migration Guide to Swiper 9"},a=function(e){let{children:t}=e,n={h1:i.A.h1,h2:i.A.h2,h3:i.A.h3,h4:i.A.h4};return(0,r.jsx)(l.x,{components:n,children:(0,r.jsx)(s.p,{meta:o,children:t})})};function c(e){let t={code:"code",h2:"h2",p:"p",...(0,l.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h2,{id:"touch-events-removed",children:"Touch Events Removed"}),"\n",(0,r.jsxs)(t.p,{children:["Now Swiper handles only Pointer Events, and doesn't rely on touch events like ",(0,r.jsx)(t.code,{children:"touchstart"}),", ",(0,r.jsx)(t.code,{children:"touchmove"}),", etc. So if your custom extra logic relies on these events, you should update it."]}),"\n",(0,r.jsx)(t.h2,{id:"autoplay",children:"Autoplay"}),"\n",(0,r.jsxs)(t.p,{children:["Swiper v9 comes with fully reworked Autoplay module, that has new parameters, methods and events. Check ",(0,r.jsx)("a",{href:"/swiper-api#autoplay",children:"Autoplay documentation"})," for more information."]}),"\n",(0,r.jsx)(t.h2,{id:"loop-mode",children:"Loop Mode"}),"\n",(0,r.jsx)(t.p,{children:"Loop mode has been fully reworked in version 9 and now instead of duplicating slides, it rearranges current ones dynamically."}),"\n",(0,r.jsxs)(t.p,{children:["It comes with new limitation. Amount of slides in loop mode should be at least 2x of ",(0,r.jsx)(t.code,{children:"slidesPerView"})," value."]}),"\n",(0,r.jsxs)(t.p,{children:[(0,r.jsx)(t.code,{children:"loopedSlides"})," with new logic works in a bit different way, and you probably should remove it or make sure it is less or equal to ",(0,r.jsx)(t.code,{children:"slidesPerView"}),"."]}),"\n",(0,r.jsx)(t.h2,{id:"lazy-loading",children:"Lazy Loading"}),"\n",(0,r.jsxs)(t.p,{children:["Lazy images loading module has been removed and integrated to the core. Check ",(0,r.jsx)("a",{href:"/swiper-api#lazy-loading",children:"Lazy Loading documentation"})," for more information."]}),"\n",(0,r.jsx)(t.h2,{id:"dom7",children:"Dom7"}),"\n",(0,r.jsx)(t.p,{children:"Dom7 library has been removed from Swiper, and it uses vanilla JS for DOM manipulation. If your custom code relied on Dom7, you should change it."}),"\n",(0,r.jsx)(t.h2,{id:"swiper-angular",children:"Swiper Angular"}),"\n",(0,r.jsxs)(t.p,{children:["Swiper Angular components have been removed in v9. Use ",(0,r.jsx)("a",{href:"/element",children:"Swiper Element"})," instead"]}),"\n",(0,r.jsx)(t.h2,{id:"swiper-solid",children:"Swiper Solid"}),"\n",(0,r.jsxs)(t.p,{children:["Swiper Solid components have been removed in v9. Use ",(0,r.jsx)("a",{href:"/element",children:"Swiper Element"})," instead"]}),"\n",(0,r.jsx)(t.h2,{id:"swiper-svelte",children:"Swiper Svelte"}),"\n",(0,r.jsxs)(t.p,{children:["Swiper Svelte components have been removed in v9. Use ",(0,r.jsx)("a",{href:"/element",children:"Swiper Element"})," instead"]})]})}function d(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,r.jsx)(a,{...e,children:(0,r.jsx)(c,{...e})})}},8453:(e,t,n)=>{"use strict";n.d(t,{R:()=>s,x:()=>o});var r=n(6540);let l={},i=r.createContext(l);function s(e){let t=r.useContext(i);return r.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function o(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(l):e.components||l:s(e.components),r.createElement(i.Provider,{value:t},e.children)}},1086:(e,t,n)=>{"use strict";n.d(t,{A:()=>i});var r=n(4848),l=n(4164);function i(e){let{level:t,id:n,link:i=!0,children:s,number:o,className:a="",style:c={},...d}=e;return(0,r.jsxs)("h".concat(t),{className:(0,l.A)("group flex whitespace-pre-wrap",a),id:n,style:{...c},...d,children:[i&&(0,r.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,r.jsx)("span",{children:s})]})}i.h1=e=>(0,r.jsx)(i,{level:1,...e}),i.h2=e=>(0,r.jsx)(i,{level:2,...e}),i.h3=e=>(0,r.jsx)(i,{level:3,...e}),i.h4=e=>(0,r.jsx)(i,{level:4,...e})},8877:(e,t,n)=>{"use strict";n.d(t,{p:()=>j});

1var r=n(4848),l=n(6540),i=n(6715),s=n(1106),o=n(3368),a=n(4164);let c=e=>{let[t,n]=(0,l.useState)(e),r=(0,l.useRef)([]),i=(0,l.useRef)(0),s=()=>{let e=document.querySelectorAll(".prose h2[id], .prose h3[id]");for(let t=0;t<e.length;t+=1){let n=e[t];r.current.push({el:n,id:n.id})}},o=()=>{let e=window.scrollY;i.current=window.innerHeight,r.current.forEach(t=>{let n=t.el.getBoundingClientRect();t.offset=e+n.top})},a=()=>{let e=r.current[0],t=window.scrollY,l=r.current.filter(e=>{let{offset:n}=e;return n>=t})[0];r.current.forEach(n=>{t+i.current/2>n.offset&&(e=n)}),r.current.indexOf(l)<r.current.indexOf(e)&&(e=l),e&&e.id&&n(e.id)},c=()=>{a()},d=()=>{o(),a()},h=()=>{window.addEventListener("scroll",c),window.addEventListener("resize",d)},u=()=>{window.removeEventListener("scroll",c),window.removeEventListener("resize",d)};return(0,l.useEffect)(()=>(s(),o(),a(),h(),()=>u()),[]),t};function d(e){let{tableOfContents:t,onClick:n}=e,i=c(t[0].slug);return(0,r.jsx)("ul",{className:"table-of-contents overflow-x-hidden shrink-0",onClick:n,children:t.map(e=>{let t=i===e.slug,n=e.children.findIndex(e=>{let{slug:t}=e;return t===i})>-1;return(0,r.jsxs)(l.Fragment,{children:[(0,r.jsx)("li",{className:"my-1",children:(0,r.jsx)("a",{href:"#".concat(e.slug),className:(0,a.A)("block rounded-full py-1.5 !text-on-surface-darker   !no-underline",{"hover:!text-on-surface-dark":!t,"!text-primary":n,"!text-primary":t}),children:e.title})}),e.children.map(e=>{let t=i===e.slug;return(0,r.jsx)("li",{className:"ml-2",children:(0,r.jsx)("a",{href:"#".concat(e.slug),className:(0,a.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=n(6033);let u=[...n(1061),...h],p=e=>e.startsWith("http")?e:"/images/sponsors/".concat(e);function m(){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:u.filter(e=>{let{plan:t,active:n}=e;return"Sponsor"!==t&&n}).map((e,t)=>{let{link:n,title:l,image:i}=e;return(0,r.jsx)("a",{className:"flex items-center justify-center hover:opacity-80 bg-white",href:n,title:l+t,rel:"sponsored",target:"_blank",children:i&&(0,r.jsx)("img",{className:"h-7 w-7 object-contain lg:h-8 lg:w-8",alt:l,loading:"lazy",src:p(i)})},l)})})]})}let x=l.useLayoutEffect;var f=n(8578),w=n(1325),g=n(1773);function j(e){let{children:t,meta:n={},pageTitle:a="",beforePageTitle:c="",afterPageTitle:h=""}=e,u=(0,i.useRouter)(),p=(0,l.useRef)(null),[j,v]=(0,l.useState)([]),[b,y]=(0,l.useState)(!1);return x(()=>{let e;let t=[];return p.current.querySelectorAll("h2, h3").forEach(n=>{let r=n.getAttribute("id"),l=n.textContent.trim();e="h3"===n.nodeName.toLowerCase();let i={slug:r,title:l,children:[]};if(e){let e=Math.max(t.length-1,0);t[e]||(t[e]={children:[]}),t[e].children.push(i)}else t.push(i)}),v(t),()=>{}},[]),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(g.s,{withSidebar:!0}),(0,r.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,r.jsxs)(o,{children:[(0,r.jsx)("title",{children:n.title},"title"),(0,r.jsx)("meta",{property:"og:title",content:n.title}),(0,r.jsx)("meta",{name:"twitter:title",content:n.title}),n.description&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)("meta",{name:"description",content:n.description},"description"),(0,r.jsx)("meta",{property:"og:description",content:n.description},"og:description"),(0,r.jsx)("meta",{name:"twitter:description",content:n.description},"twitter:description")]})]}),(0,r.jsx)(f.$,{className:"!fixed bottom-4 right-4 z-40 lg:hidden bg-surface-1 border border-outline backdrop-blur-lg w-16 h-16",onClick:()=>y(!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(b?"block":"hidden"),onClick:()=>y(!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(b?"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)(m,{}),j.length>0&&(0,r.jsx)(d,{onClick:e=>{e.target&&e.target.closest("a")&&y(!1)},tableOfContents:j})]})}),(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:p,children:[c,(a||n.title)&&(0,r.jsx)("h1",{children:a||n.title}),h,t,(0,r.jsx)("div",{className:"mt-4 border-t border-outline pt-4 text-right text-sm",children:(0,r.jsx)(s,{href:"https://github.com/nolimits4web/swiper-website/edit/master/src/pages".concat(u.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)(w.A,{})]})}}},e=>{var t=t=>e(e.s=t);e.O(0,[950,636,593,792],()=>t(982)),_N_E=e.O()}]);