1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[395],{7375:function(a,e,t){"use strict";function n(a,e){if(null==a)return{};var t,n,s=function(a,e){if(null==a)return{};var t,n,s={},p=Object.keys(a);for(n=0;n<p.length;n++)t=p[n],e.indexOf(t)>=0||(s[t]=a[t]);return s}(a,e);if(Object.getOwnPropertySymbols){var p=Object.getOwnPropertySymbols(a);for(n=0;n<p.length;n++)t=p[n],e.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(a,t)&&(s[t]=a[t])}return s}t.d(e,{Z:function(){return n}})},3905:function(a,e,t){"use strict";t.d(e,{kt:function(){return k}});var n=t(7294);function s(a,e,t){return e in a?Object.defineProperty(a,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):a[e]=t,a}function p(a,e){var t=Object.keys(a);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(a);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(a,e).enumerable}))),t.push.apply(t,n)}return t}function o(a){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?p(Object(t),!0).forEach((function(e){s(a,e,t[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(t)):p(Object(t)).forEach((function(e){Object.defineProperty(a,e,Object.getOwnPropertyDescriptor(t,e))}))}return a}function r(a,e){if(null==a)return{};var t,n,s=function(a,e){if(null==a)return{};var t,n,s={},p=Object.keys(a);for(n=0;n<p.length;n++)t=p[n],e.indexOf(t)>=0||(s[t]=a[t]);return s}(a,e);if(Object.getOwnPropertySymbols){var p=Object.getOwnPropertySymbols(a);for(n=0;n<p.length;n++)t=p[n],e.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(a,t)&&(s[t]=a[t])}return s}var c=n.createContext({}),m=function(a){var e=n.useContext(c),t=e;return a&&(t="function"===typeof a?a(e):o(o({},e),a)),t},l={inlineCode:"code",wrapper:function(a){var e=a.children;return n.createElement(n.Fragment,{},e)}},i=n.forwardRef((function(a,e){var t=a.components,s=a.mdxType,p=a.originalType,c=a.parentName,i=r(a,["components","mdxType","originalType","parentName"]),k=m(t),N=s,u=k["".concat(c,".").concat(N)]||k[N]||l[N]||p;return t?n.createElement(u,o(o({ref:e},i),{},{components:t})):n.createElement(u,o({ref:e},i))}));function k(a,e){var t=arguments,s=e&&e.mdxType;if("string"===typeof a||s){var p=t.length,o=new Array(p);o[0]=i;var r={};for(var c in e)hasOwnProperty.call(e,c)&&(r[c]=e[c]);r.originalType=a,r.mdxType="string"===typeof a?a:s,o[1]=r;for(var m=2;m<p;m++)o[m]=t[m];return n.createElement.apply(null,o)}return n.createElement.apply(null,t)}i.displayName="MDXCreateElement"},6010:function(a,e,t){"use strict";function n(a){var e,t,s="";if("string"===typeof a||"number"===typeof a)s+=a;else if("object"===typeof a)if(Array.isArray(a))for(e=0;e<a.length;e++)a[e]&&(t=n(a[e]))&&(s&&(s+=" "),s+=t);else for(e in a)a[e]&&(s&&(s+=" "),s+=e);return s}function s(){for(var a,e,t=0,s="";t<arguments.length;)(a=arguments[t++])&&(e=n(a))&&(s&&(s+=" "),s+=e);return s}t.d(e,{Z:function(){return s}})},6211:function(a,e,t){"use strict";t.d(e,{Z:function(){return m}});var n=t(5893),s=t(6156),p=t(7375),o=t(6010);function r(a,e){var t=Object.keys(a);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(a);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(a,e).enumerable}))),t.push.apply(t,n)}return t}function c(a){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?r(Object(t),!0).forEach((function(e){(0,s.Z)(a,e,t[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(t)):r(Object(t)).forEach((function(e){Object.defineProperty(a,e,Object.getOwnPropertyDescriptor(t,e))}))}return a}function m(a){var e=a.level,t=a.id,s=a.children,r=a.number,m=a.badge,l=a.className,i=void 0===l?"":l,k=a.hidden,N=void 0!==k&&k,u=(a.toc,a.style),d=void 0===u?{}:u,g=(0,p.Z)(a,["level","id","children","number","badge","className","hidden","toc","style"]),f="h".concat(e);return(0,n.jsxs)(f,c(c({className:(0,o.Z)("group flex whitespace-pre-wrap",i),id:t,style:c(c({},N?{marginBottom:0}:{}),d)},g),{},{children:[!N&&(0,n.jsx)("a",{href:"#".concat(t),className:"absolute after:hash opacity-0 group-hover:opacity-100",style:{marginLeft:"-1em",paddingRight:"0.5em",color:"#a1a1aa",textDecoration:"none"},"aria-label":"Anchor"}),r&&(0,n.jsx)("span",{className:"bg-cyan-100 w-8 h-8 inline-flex items-center justify-center rounded-full text-cyan-700 text-xl mr-3 flex-none",children:r}),(0,n.jsx)("span",{className:N?"sr-only":void 0,children:s}),m&&(0,n.jsx)("span",{className:"ml-3 inline-flex items-center px-3 py-1 rounded-full text-sm font-medium leading-4 bg-green-150 text-green-900",children:m})]}))}},299:function(a,e,t){"use strict";t.d(e,{R:function(){return N}});var n=t(5893),s=t(7329);function p(a){var e=a.title;return e?(0,n.jsx)("h1",{className:"text-3xl font-extrabold text-gray-900 tracking-tight",children:e}):null}var o=t(6010),r=t(7294),c=function(a){var e=(0,r.useState)(a),t=e[0],n=e[1],s=(0,r.useRef)([]),p=(0,r.useRef)(0),o=function(){var a=window.scrollY;p.current=window.innerHeight,s.current.forEach((function(e){var t=e.el.getBoundingClientRect();
1e.offset=a+t.top}))},c=function(){var a=s.current[0],e=window.scrollY,t=s.current.filter((function(a){return a.offset>=e}))[0];s.current.forEach((function(t){e+p.current/2>t.offset&&(a=t)})),s.current.indexOf(t)<s.current.indexOf(a)&&(a=t),a&&a.id&&n(a.id)},m=function(){c()},l=function(){o(),c()};return(0,r.useEffect)((function(){return function(){for(var a=document.querySelectorAll(".prose h2[id], .prose h3[id]"),e=0;e<a.length;e+=1){var t=a[e];s.current.push({el:t,id:t.id})}}(),o(),c(),window.addEventListener("scroll",m),window.addEventListener("resize",l),function(){return window.removeEventListener("scroll",m),void window.removeEventListener("resize",l)}}),[]),t};function m(a){var e=a.tableOfContents,t=c(e[0].slug);return(0,n.jsx)("ul",{className:"overflow-x-hidden text-gray-500 table-of-contents",children:e.map((function(a){var e=t===a.slug,s=a.children.findIndex((function(a){return a.slug===t}))>-1;return(0,n.jsxs)(r.Fragment,{children:[(0,n.jsx)("li",{className:"my-1",children:(0,n.jsx)("a",{href:"#".concat(a.slug),className:(0,o.Z)("block py-1 px-2 transition-colors duration-100 text-gray-900 hover:text-primary hover:no-underline font-medium hover:bg-primary hover:bg-opacity-10 rounded",{"text-primary":e||s,"bg-primary":e,"bg-opacity-10":e}),children:a.title})}),a.children.map((function(a){var e=t===a.slug;return(0,n.jsx)("li",{className:"ml-2",children:(0,n.jsx)("a",{href:"#".concat(a.slug),className:(0,o.Z)("block py-1 px-2 transition-colors duration-100 text-gray-900 hover:text-primary hover:no-underline hover:bg-primary hover:bg-opacity-10 rounded",{"text-primary":e,"bg-primary":e,"bg-opacity-10":e}),children:a.title})},a.slug)}))]},a.slug)}))})}var l=t(8837),i=t(8105);function k(){return(0,n.jsxs)("div",{className:"mb-4",children:[(0,n.jsxs)("div",{className:"font-semibold mb-2 flex justify-between items-center",children:[(0,n.jsx)("span",{children:"Sponsors"}),(0,n.jsx)("a",{href:"https://opencollective.com/swiper",target:"_blank",className:"py-1 px-2 bg-primary text-white font-medium text-xs rounded-full no-underline hover:bg-opacity-90 duration-200 hover:no-underline",children:"Become a sponsor"})]}),(0,n.jsx)("div",{className:"-mx-2 p-2 bg-white grid grid-cols-4 gap-2 rounded shadow",children:i.Z.filter((function(a){return"Sponsor"!==a.plan})).map((function(a){var e=a.link,t=a.title,s=(a.image_h,a.image);a.alt;return(0,n.jsx)("a",{className:"hover:opacity-80 flex items-center justify-center",href:e,title:t,rel:"noopener",target:"_blank",onClick:function(){return(0,l.O)(e)},children:(0,n.jsx)("img",{className:"max-h-16 w-auto",alt:t,src:"/images/sponsors/".concat(s)})},t)}))})]})}function N(a){var e=a.children,t=a.meta,o=void 0===t?{}:t,r=a.classes,c=a.tableOfContents,l=void 0===c?[]:c,i=[].concat((0,s.Z)(r?[{title:"Default class reference",slug:"class-reference",children:[]}]:[]),(0,s.Z)(l));return(0,n.jsx)("div",{children:(0,n.jsxs)("div",{id:o.containerId,className:"w-full flex",children:[i.length>0&&(0,n.jsx)("div",{className:"hidden text-sm lg:block flex-none w-64 bg-gray-100",children:(0,n.jsxs)("div",{className:"overflow-y-auto overscroll-contain sticky top-0 p-4 max-h-screen",children:[(0,n.jsx)(k,{}),(0,n.jsx)(m,{tableOfContents:i})]})}),(0,n.jsxs)("div",{className:"max-w-none prose min-w-0 flex-auto px-4 sm:px-6 xl:px-8 pt-10 pb-24 lg:pb-16",children:[o.title&&(0,n.jsx)(p,{title:o.title,description:o.description}),e]})]})})}},4022:function(a,e,t){"use strict";t.r(e),t.d(e,{default:function(){return k}});var n=t(6156),s=t(7375),p=(t(7294),t(3905)),o=t(6211),r=t(299);function c(a,e){var t=Object.keys(a);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(a);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(a,e).enumerable}))),t.push.apply(t,n)}return t}function m(a){for(var e=1;e<arguments.length;e++){var t=null!=arguments[e]?arguments[e]:{};e%2?c(Object(t),!0).forEach((function(e){(0,n.Z)(a,e,t[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(e){Object.defineProperty(a,e,Object.getOwnPropertyDescriptor(t,e))}))}return a}var l={Layout:r.R,meta:{title:"Getting Started With Swiper"},tableOfContents:[{title:"Installation",slug:"installation",children:[{title:"Install from NPM",slug:"install-from-npm"}
1,{title:"Use Swiper from CDN",slug:"use-swiper-from-cdn"},{title:"Download assets",slug:"download-assets"}]},{title:"Add Swiper HTML Layout",slug:"add-swiper-html-layout",children:[]},{title:"Swiper CSS Styles/Size",slug:"swiper-css-styles-size",children:[]},{title:"Initialize Swiper",slug:"initialize-swiper",children:[]},{title:"What next?",slug:"what-next",children:[]}]},i=r.R;function k(a){var e=a.components,t=(0,s.Z)(a,["components"]);return(0,p.kt)(i,m(m(m({},l),t),{},{components:e,mdxType:"MDXLayout"}),(0,p.kt)(o.Z,{level:2,id:"installation",toc:!0,mdxType:"Heading"},"Installation"),(0,p.kt)("p",null,"There are few options on how to include/import Swiper into your project:"),(0,p.kt)(o.Z,{level:3,id:"install-from-npm",toc:!0,mdxType:"Heading"},"Install from NPM"),(0,p.kt)("p",null,"We can install Swiper from NPM"),(0,p.kt)("pre",null,(0,p.kt)("code",m({parentName:"pre"},{})," $ npm install swiper@6\n")),(0,p.kt)("pre",m({},{className:"language-js"}),(0,p.kt)("code",m({parentName:"pre"},{className:"language-js"})," ",(0,p.kt)("span",m({parentName:"code"},{className:"token comment"}),"// import Swiper JS"),"\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token keyword module"}),"import")," ",(0,p.kt)("span",m({parentName:"code"},{className:"token imports"}),(0,p.kt)("span",m({parentName:"span"},{className:"token maybe-class-name"}),"Swiper"))," ",(0,p.kt)("span",m({parentName:"code"},{className:"token keyword module"}),"from")," ",(0,p.kt)("span",m({parentName:"code"},{className:"token string"}),"'swiper'"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token comment"}),"// import Swiper styles"),"\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token keyword module"}),"import")," ",(0,p.kt)("span",m({parentName:"code"},{className:"token string"}),"'swiper/swiper-bundle.css'"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token keyword"}),"const")," swiper ",(0,p.kt)("span",m({parentName:"code"},{className:"token operator"}),"=")," ",(0,p.kt)("span",m({parentName:"code"},{className:"token keyword"}),"new")," ",(0,p.kt)("span",m({parentName:"code"},{className:"token class-name"}),"Swiper"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),"("),(0,p.kt)("span",m({parentName:"code"},{className:"token spread operator"}),"..."),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),")"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),";"),"\n")),(0,p.kt)("p",null,"By default Swiper exports only core version without additional modules (like Navigation, Pagination, etc.). So you need to import and configure them too:"),(0,p.kt)("pre",m({},{className:"language-js"}),(0,p.kt)("code",m({parentName:"pre"},{className:"language-js"})," ",(0,p.kt)("span",m({parentName:"code"},{className:"token comment"}),"// core version + navigation, pagination modules:"),"\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token keyword module"}),"import")," ",(0,p.kt)("span",m({parentName:"code"},{className:"token imports"}),(0,p.kt)("span",m({parentName:"span"},{className:"token maybe-class-name"}),"SwiperCore"),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),",")," ",(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"{")," ",(0,p.kt)("span",m({parentName:"span"},{className:"token maybe-class-name"}),"Navigation"),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),",")," ",(0,p.kt)("span",m({parentName:"span"},{className:"token maybe-class-name"}),"Pagination")," ",(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"}"))," ",(0,p.kt)("span",m({parentName:"code"},{className:"token keyword module"}),"from")," ",(0,p.kt)("span",m({parentName:"code"},{className:"token string"}),"'swiper/core'"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token comment"}),"// configure Swiper to use modules"),"\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token maybe-class-name"}),"SwiperCore"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),"."),(0,p.kt)("span",m({parentName:"code"},{className:"token method function property-access"}),"use"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),"("),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),"["),(0,p.kt)("span",m({parentName:"code"},{className:"token maybe-class-name"}),"Navigation"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),",")," ",(0,p.kt)("span",m({parentName:"code"},{className:"token maybe-class-name"}),"Pagination"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),"]"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),")"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token comment"}),"// init Swiper:"),"\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token keyword"}),"const")," swiper ",(0,p.kt)("span",m({parentName:"code"},{className:"token operator"}),"=")," ",(0,p.kt)("span",m({parentName:"code"},{className:"token keyword"}),"new")," ",(0,p.kt)("span",m({parentName:"code"},{className:"token class-name"}),"Swiper"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),"("),(0,p.kt)("span",m({parentName:"code"},{className:"token spread operator"}),"..."),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),")"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),";"),"\n")),(0,p.kt)("p",null,"If you want to import Swiper with all modules (bundle) then it should be imported from ",(0,p.kt)("inlineCode",{parentName:"p"},"swiper/bundle"),":"),(0,p.kt)("pre",m({},{className:"language-js"}),(0,p.kt)("code",m({parentName:"pre"},{className:"language-js"})," ",(0,p.kt)("span",m({parentName:"code"},{className:"token comment"}),"// import Swiper bundle with all modules installed"),"\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token keyword module"}),"import")," ",(0,p.kt)("span",m({parentName:"code"},{className:"token imports"}),(0,p.kt)("span",m({parentName:"span"},{className:"token maybe-class-name"}),"Swiper"))," ",(0,p.kt)("span",m({parentName:"code"},{className:"token keyword module"}),"from")," ",(0,p.kt)("span",m({parentName:"code"},{className:"token string"}),"'swiper/bundle'"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),";"),"\n\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token comment"}),"// init Swiper:"),"\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token keyword"}),"const")," swiper ",(0,p.kt)("span",m({parentName:"code"},{className:"token operator"}),"=")," ",(0,p.kt)("span",m({parentName:"code"},{className:"token keyword"}),"new")," ",(0,p.kt)("span",m({parentName:"code"},{className:"token class-name"}),"Swiper"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),"("),(0,p.kt)("span",m({parentName:"code"},{className:"token spread operator"}),"..."),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),")"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),";
1"),"\n")),(0,p.kt)(o.Z,{level:3,id:"use-swiper-from-cdn",toc:!0,mdxType:"Heading"},"Use Swiper from CDN"),(0,p.kt)("p",null,"If you don't want to include Swiper files in your project, you may use it from CDN. The following files are available:"),(0,p.kt)("pre",m({},{className:"language-html"}),(0,p.kt)("code",m({parentName:"pre"},{className:"language-html"}),(0,p.kt)("span",m({parentName:"code"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"<"),"link")," ",(0,p.kt)("span",m({parentName:"span"},{className:"token attr-name"}),"rel"),(0,p.kt)("span",m({parentName:"span"},{className:"token attr-value"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"'),"stylesheet",(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"'))," ",(0,p.kt)("span",m({parentName:"span"},{className:"token attr-name"}),"href"),(0,p.kt)("span",m({parentName:"span"},{className:"token attr-value"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"'),"https://unpkg.com/swiper/swiper-bundle.css",(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"'))," ",(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"/>")),"\n",(0,p.kt)("span",m({parentName:"code"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"<"),"link")," ",(0,p.kt)("span",m({parentName:"span"},{className:"token attr-name"}),"rel"),(0,p.kt)("span",m({parentName:"span"},{className:"token attr-value"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"'),"stylesheet",(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"'))," ",(0,p.kt)("span",m({parentName:"span"},{className:"token attr-name"}),"href"),(0,p.kt)("span",m({parentName:"span"},{className:"token attr-value"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"'),"https://unpkg.com/swiper/swiper-bundle.min.css",(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"'))," ",(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"/>")),"\n\n",(0,p.kt)("span",m({parentName:"code"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"<"),"script")," ",(0,p.kt)("span",m({parentName:"span"},{className:"token attr-name"}),"src"),(0,p.kt)("span",m({parentName:"span"},{className:"token attr-value"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"'),"https://unpkg.com/swiper/swiper-bundle.js",(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"')),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),">")),(0,p.kt)("span",m({parentName:"code"},{className:"token script"})),(0,p.kt)("span",m({parentName:"code"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"</"),"script"),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),">")),"\n",(0,p.kt)("span",m({parentName:"code"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"<"),"script")," ",(0,p.kt)("span",m({parentName:"span"},{className:"token attr-name"}),"src"),(0,p.kt)("span",m({parentName:"span"},{className:"token attr-value"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"'),"https://unpkg.com/swiper/swiper-bundle.min.js",(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"')),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),">")),(0,p.kt)("span",m({parentName:"code"},{className:"token script"})),(0,p.kt)("span",m({parentName:"code"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"</"),"script"),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),">")),"\n")),(0,p.kt)("p",null,"If you use ES modules in browser, there is a CDN ver
1sion for that too:"),(0,p.kt)("pre",m({},{className:"language-html"}),(0,p.kt)("code",m({parentName:"pre"},{className:"language-html"}),(0,p.kt)("span",m({parentName:"code"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"<"),"script")," ",(0,p.kt)("span",m({parentName:"span"},{className:"token attr-name"}),"type"),(0,p.kt)("span",m({parentName:"span"},{className:"token attr-value"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"'),"module",(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"')),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),">")),(0,p.kt)("span",m({parentName:"code"},{className:"token script"}),(0,p.kt)("span",m({parentName:"span"},{className:"token language-javascript"}),"\n ",(0,p.kt)("span",m({parentName:"span"},{className:"token keyword module"}),"import")," ",(0,p.kt)("span",m({parentName:"span"},{className:"token imports"}),(0,p.kt)("span",m({parentName:"span"},{className:"token maybe-class-name"}),"Swiper"))," ",(0,p.kt)("span",m({parentName:"span"},{className:"token keyword module"}),"from")," ",(0,p.kt)("span",m({parentName:"span"},{className:"token string"}),"'https://unpkg.com/swiper/swiper-bundle.esm.browser.min.js'"),"\n\n ",(0,p.kt)("span",m({parentName:"span"},{className:"token keyword"}),"const")," swiper ",(0,p.kt)("span",m({parentName:"span"},{className:"token operator"}),"=")," ",(0,p.kt)("span",m({parentName:"span"},{className:"token keyword"}),"new")," ",(0,p.kt)("span",m({parentName:"span"},{className:"token class-name"}),"Swiper"),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"("),(0,p.kt)("span",m({parentName:"span"},{className:"token spread operator"}),"..."),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),")"),"\n")),(0,p.kt)("span",m({parentName:"code"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"</"),"script"),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),">")),"\n")),(0,p.kt)(o.Z,{level:3,id:"download-assets",toc:!0,mdxType:"Heading"},"Download assets"),(0,p.kt)("p",null,"If you want to use Swiper assets locally, you can directly download them from ",(0,p.kt)("a",m({parentName:"p"},{href:"https://unpkg.com/swiper/"}),"https://unpkg.com/swiper/")),(0,p.kt)(o.Z,{level:2,id:"add-swiper-html-layout",toc:!0,mdxType:"Heading"},"Add Swiper HTML Layout"),(0,p.kt)("p",null,"Now, we need to add basic Swiper layout to our app:"),(0,p.kt)("pre",m({},{className:"language-html"}),(0,p.kt)("code",m({parentName:"pre"},{className:"language-html"}),(0,p.kt)("span",m({parentName:"code"},{className:"token comment"}),"\x3c!-- Slider main container --\x3e"),"\n",(0,p.kt)("span",m({parentName:"code"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,p.kt)("span",m({parentName:"span"},{className:"token attr-name"}),"class"),(0,p.kt)("span",m({parentName:"span"},{className:"token attr-value"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"'),"swiper-container",(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"')),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),">")),"\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token comment"}),"\x3c!-- Additional required wrapper --\x3e"),"\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,p.kt)("span",m({parentName:"span"},{className:"token attr-name"}),"class"),(0,p.kt)("span",m({parentName:"span"},{className:"token attr-value"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"'),"swiper-wrapper",(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"')),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),">")),"\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token comment"}),"\x3c!-- Slides --\x3e"),"\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,p.kt)("span",m({parentName:"span"},{className:"token attr-name"}),"class"),(0,p.kt)("span",m({parentName:"span"},{className:"token attr-value"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"'),"swiper-slide",(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"')),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),">")),"Slide 1",(0,p.kt)("span",m({parentName:"code"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),">")),"\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,p.kt)("span",m({parentName:"span"},{className:"token attr-name"}),"class"),(0,p.kt)("span",m({parentName:"span"},{className:"token attr-value"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"'),"swiper-slide",(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"')),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),">")),"Slide 2",(0,p.kt)("span",m({parentName:"code"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),">")),"\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,p.kt)("span",m({parentName:"span"},{className:"token attr-name"}),"class"),(0,p.kt)("span",m({parentName:"span"},{className:"token attr-value"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"'),"swiper-slide",(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"')),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),">")),"Slide 3",(0,p.kt)("span",m({parentName:"code"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),">")),"\n ...\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),">")),"\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token comment"}),"\x3c!-- If we need pagination --\x3e"),"\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,p.kt)("span",m({parentName:"span"},{className:"token attr-name"}),"class"),(0,p.kt)("span",m({parentName:"span"},{className:"token attr-value"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"'),"swiper-pagination",(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"')),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),">")),(0,p.kt)("span",m({parentName:"code"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),">")),"\n\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token comment"}),"\x3c!-- If we need navigation buttons --\x3e"),"\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,p.kt)("span",m({parentName:"span"},{className:"token attr-name"}),"class"),(0,p.kt)("span",m({parentName:"span"},{className:"token attr-value"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"'),"swiper-button-prev",(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"')),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),">")),(0,p.kt)("span",m({parentName:"code"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),">")),"\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,p.kt)("span",m({parentName:"span"},{className:"token attr-name"}),"class"),(0,p.kt)("span",m({parentName:"span"},{className:"token attr-value"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"'),"swiper-button-next",(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"')),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),">")),(0,p.kt)("span",m({parentName:"code"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),">")),"\n\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token comment"}),"\x3c!-- If we need scrollbar --\x3e"),"\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"<"),"div")," ",(0,p.kt)("span",m({parentName:"span"},{className:"token attr-name"}),"class"),(0,p.kt)("span",m({parentName:"span"},{className:"token attr-value"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation attr-equals"}),"="),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"'),"swiper-scrollbar",(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),'"')),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),">")),(0,p.kt)("span",m({parentName:"code"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),">")),"\n",(0,p.kt)("span",m({parentName:"code"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token tag"}),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),"</"),"div"),(0,p.kt)("span",m({parentName:"span"},{className:"token punctuation"}),">")),"\n")),(0,p.kt)(o.Z,{level:2,id:"swiper-css-styles-size",toc:!0,mdxType:"Heading"},"Swiper CSS Styles/Size"),(0,p.kt)("p",null,"In addition to ",(0,p.kt)("a",{href:"/api/#styles",target:"_blank"}
1,"Swiper's CSS styles"),", we may need to add some custom styles to set Swiper size:"),(0,p.kt)("pre",m({},{className:"language-css"}),(0,p.kt)("code",m({parentName:"pre"},{className:"language-css"}),(0,p.kt)("span",m({parentName:"code"},{className:"token selector"}),(0,p.kt)("span",m({parentName:"span"},{className:"token class"}),".swiper-container"))," ",(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token property"}),"width"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),":")," ",(0,p.kt)("span",m({parentName:"code"},{className:"token number"}),"600"),(0,p.kt)("span",m({parentName:"code"},{className:"token unit"}),"px"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),";"),"\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token property"}),"height"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),":")," ",(0,p.kt)("span",m({parentName:"code"},{className:"token number"}),"300"),(0,p.kt)("span",m({parentName:"code"},{className:"token unit"}),"px"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),";"),"\n",(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),"}"),"\n")),(0,p.kt)(o.Z,{level:2,id:"initialize-swiper",toc:!0,mdxType:"Heading"},"Initialize Swiper"),(0,p.kt)("p",null,"Finally, we need to initialize Swiper in JS:"),(0,p.kt)("pre",m({},{className:"language-js"}),(0,p.kt)("code",m({parentName:"pre"},{className:"language-js"}),(0,p.kt)("span",m({parentName:"code"},{className:"token keyword"}),"const")," swiper ",(0,p.kt)("span",m({parentName:"code"},{className:"token operator"}),"=")," ",(0,p.kt)("span",m({parentName:"code"},{className:"token keyword"}),"new")," ",(0,p.kt)("span",m({parentName:"code"},{className:"token class-name"}),"Swiper"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),"("),(0,p.kt)("span",m({parentName:"code"},{className:"token string"}),"'.swiper-container'"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),",")," ",(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),"{"),"\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token comment"}),"// Optional parameters"),"\n direction",(0,p.kt)("span",m({parentName:"code"},{className:"token operator"}),":")," ",(0,p.kt)("span",m({parentName:"code"},{className:"token string"}),"'vertical'"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),","),"\n loop",(0,p.kt)("span",m({parentName:"code"},{className:"token operator"}),":")," ",(0,p.kt)("span",m({parentName:"code"},{className:"token boolean"}),"true"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),","),"\n\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token comment"}),"// If we need pagination"),"\n pagination",(0,p.kt)("span",m({parentName:"code"},{className:"token operator"}),":")," ",(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),"{"),"\n el",(0,p.kt)("span",m({parentName:"code"},{className:"token operator"}),":")," ",(0,p.kt)("span",m({parentName:"code"},{className:"token string"}),"'.swiper-pagination'"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),","),"\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),"}"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),","),"\n\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token comment"}),"// Navigation arrows"),"\n navigation",(0,p.kt)("span",m({parentName:"code"},{className:"token operator"}),":")," ",(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),"{"),"\n nextEl",(0,p.kt)("span",m({parentName:"code"},{className:"token operator"}),":")," ",(0,p.kt)("span",m({parentName:"code"},{className:"token string"}),"'.swiper-button-next'"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),","),"\n prevEl",(0,p.kt)("span",m({parentName:"code"},{className:"token operator"}),":")," ",(0,p.kt)("span",m({parentName:"code"},{className:"token string"}),"'.swiper-button-prev'"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),","),"\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),"}"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),","),"\n\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token comment"}),"// And if we need scrollbar"),"\n scrollbar",(0,p.kt)("span",m({parentName:"code"},{className:"token operator"}),":")," ",(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),"{"),"\n el",(0,p.kt)("span",m({parentName:"code"},{className:"token operator"}),":")," ",(0,p.kt)("span",m({parentName:"code"},{className:"token string"}),"'.swiper-scrollbar'"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),","),"\n ",(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),"}"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),","),"\n",(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),"}"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),")"),(0,p.kt)("span",m({parentName:"code"},{className:"token punctuation"}),";"),"\n")),(0,p.kt)(o.Z,{level:2,id:"what-next",toc:!0,mdxType:"Heading"},"What next?"),(0,p.kt)("p",null,"As you see it is really easy to integrate Swiper into your website or app. So here are your next steps:"),(0,p.kt)("ul",null,(0,p.kt)("li",{parentName:"ul"},"Go to ",(0,p.kt)("a",{href:"../api/"},"API Documentation")," to learn more about all Swiper API and how to control it."),(0,p.kt)("li",{parentName:"ul"},"Look at available ",(0,p.kt)("a",{href:"../demos/",target:"_blank"},"Demos"),"."),(0,p.kt)("li",{parentName:"ul"},"If you have questions about Swiper ask them in ",(0,p.kt)("a",{href:"http://stackoverflow.com",target:"_blank"},"StackOverflow")," and don't forget to tag your question with ",(0,p.kt)("a",{href:"http://stackoverflow.com/questions/tagged/swiper",target:"_blank"},(0,p.kt)("code",null,"swiper"))," tag."),(0,p.kt)("li",{parentName:"ul"},"Create issue on ",(0,p.kt)("a",{href:"https://github.com/nolimits4web/swiper/",target:"_blank"},"GitHub")," if you found a bug.")))}k.isMDXComponent=!0,k.layoutProps=l},5227:function(a,e,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/get-started",function(){return t(4022)}])}},function(a){a.O(0,[774,888,179],(function(){return e=5227,a(a.s=e);var e}));var e=a.O();_N_E=e}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.