https://uiinitiative.com/_next/static/chunks/pages/blog/update-to-swiper-v11-cbf69727475960a2.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[236],{60:(e,s,n)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/blog/update-to-swiper-v11",function(){return n(8633)}])},1668:(e,s,n)=>{"use strict";n.d(s,{R:()=>l});var t=n(4232);let a=t.createContext({});function l(e){let s=t.useContext(a);return t.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}},3181:(e,s,n)=>{"use strict";n.d(s,{n:()=>d});var t=n(7876),a=n(9099),l=n(4232),c=n(3597),i=n(8106),r=n(3868),o=n(7008),p=n(3674);let d=e=>{let{children:s,meta:n={}}=e,{title:d,date:u,image:h,video:m}=n,x=(0,a.useRouter)(),j=(0,l.useRef)(null),[N,k]=(0,l.useState)([]);return(0,l.useEffect)(()=>{j.current&&k([...[...j.current.querySelectorAll("h2")].map(e=>({text:e.textContent,el:e}))])},[]),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(o.c,{title:"".concat(d," | UI Initiative Blog"),shareTitle:d,description:"UI Initiative Blog",share:h}),(0,t.jsx)(c.s,{}),(0,t.jsxs)(i.m,{maxWidth:"max-w-screen-lg mt-16 mb-12 z-10",children:[u&&(0,t.jsx)("div",{className:"mb-2 text-center text-sm text-white/50",children:Intl.DateTimeFormat("en-us",{day:"numeric",month:"short",year:"numeric"}).format(new Date(u))}),(0,t.jsx)(p.s,{children:d}),(0,t.jsxs)("div",{className:"prose w-full max-w-none",onClick:e=>{var s,n,t;let a=e.target;(null==(n=a.closest("a"))||null==(s=n.getAttribute("href"))?void 0:s.startsWith("https://uiinitiative.com"))&&(e.preventDefault(),x.push(((null==a||null==(t=a.closest("a"))?void 0:t.getAttribute("href"))||"").split("https://uiinitiative.com")[1]))},children:[(h||m)&&(0,t.jsx)("div",{className:"relative mb-8 sm:mx-0 sm:mt-0",children:(0,t.jsx)("div",{className:"relative overflow-hidden border border-white/20 pb-[50%]",children:m?(0,t.jsx)("video",{className:"absolute left-0 top-0 !m-0 !h-full !w-full object-cover object-center",src:"".concat(m),autoPlay:!0,muted:!0,playsInline:!0,loop:!0}):(0,t.jsx)("img",{className:"absolute left-0 top-0 !m-0 !h-full !w-full object-cover object-center",src:"".concat(h)})})}),(0,t.jsx)("div",{className:"post-content",ref:j,children:s})]})]}),(0,t.jsx)(r.w,{})]})}},3674:(e,s,n)=>{"use strict";n.d(s,{s:()=>a});var t=n(7876);let a=e=>{let{className:s,children:n,...a}=e;return(0,t.jsx)("h1",{style:{textWrap:"balance"},className:"mb-8 text-center text-4xl font-bold !leading-[1.25] sm:text-5xl lg:mb-12 ".concat(s||""),...a,children:n})}},8633:(e,s,n)=>{"use strict";n.r(s),n.d(s,{default:()=>o,meta:()=>c});var t=n(7876),a=n(1668),l=n(3181);let c={title:"Update To Swiper v11",date:"2023-10-25T07:00:00.000Z",image:"/images/blog/update-to-swiper-v11/cover.jpg"},i=e=>{let{children:s}=e;return(0,t.jsx)(l.n,{meta:c,children:s})};function r(e){let s={a:"a",code:"code",h2:"h2",p:"p",pre:"pre",span:"span",...(0,a.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(s.p,{children:["A big ",(0,t.jsx)(s.a,{href:"https://swiperjs.com/blog/swiper-v11-back-to-basics",children:"Swiper v11 update"})," was released yesterday."]}),"\n",(0,t.jsx)(s.p,{children:"And to day we release update to all the UI Initiative items with Swiper to fully support Swiper v11."}),"\n",(0,t.jsx)(s.h2,{children:"Migration to Swiper v11"}),"\n",(0,t.jsx)(s.p,{children:"Even though Swiper v11 is a major update, it doesn't bring any breaking changes to our UI Initiative items, so in most cases no changes are required other than simply upgrading to the latest version of Swiper."}),"\n",(0,t.jsx)(s.p,{children:"If you use NPM, update Swiper package by running the following command in terminal:"}),"\n",(0,t.jsx)(s.pre,{children:(0,t.jsx)(s.code,{children:"npm i swiper@latest\n"})}),"\n",(0,t.jsxs)(s.p,{children:["If you use Swiper from CDN, update ",(0,t.jsx)(s.code,{children:"@10"})," to ",(0,t.jsx)(s.code,{children:"@11"})," in Swiper assets source:"]}),"\n","\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:"<"}),"link"]})," ",(0,t.jsx)(s.span,{className:"token attr-name",children:"rel"}),(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:'"'}),"stylesheet",(0,t.jsx)(s.span,{className:"token punctuation",children:'"'})]})," ",(0,t.jsx)(s.span,{className:"token attr-name",children:"href"}),(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:'"'}),"https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css",(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:"<"}),"script"]})," ",(0,t.jsx)(s.span,{className:"token attr-name",children:"src"}),(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:'"'}),"https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js",(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 script"}),(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:"</"}),"script"]}),(0,t.jsx)(s.span,{className:"token punctuation",children:">"})]}),"\n\n",(0,t.jsx)(s.span,{className:"token comment",children:"\x3c!-- should be changed to: --\x3e"}),"\n\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:"<"}),"link"]})," ",(0,t.jsx)(s.span,{className:"token attr-name",children:"rel"}),(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:'"'}),"stylesheet",(0,t.jsx)(s.span,{className:"token punctuation",children:'"'})]})," ",(0,t.jsx)(s.span,{className:"token attr-name",children:"href"}),(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:'"'}),"https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css",(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:"<"}),"script"]})," ",(0,t.jsx)(s.span,{className:"token attr-name",children:"src"}),(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:'"'}),"https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js",(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 script"}),(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:"</"}),"script"]}),(0,t.jsx)(s.span,{className:"token punctuation",children:">"})]}),"\n"]})}),"\n",(0,t.jsx)(s.h2,{children:"Static Demos"}),"\n",(0,t.jsx)(s.p,{children:"Also, all UI Initiative Swiper related items now come with pure static demos (in the downloaded package) with pure HTML, JS and CSS in addition to Vite demo we had before."}),"\n",(0,t.jsx)(s.p,{children:"So if you are not familiar with Vite, make sure to redownload the package and check new static demo."})]})}function o(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,t.jsx)(i,{...e,children:(0,t.jsx)(r,{...e})})}},9099:(e,s,n)=>{e.exports=n(6296)}},e=>{e.O(0,[678,636,593,792],()=>e(e.s=60)),_N_E=e.O()}]);