1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[336],{8192:(s,n,e)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/vue",function(){return e(1875)}])},1875:(s,n,e)=>{"use strict";e.r(n),e.d(n,{default:()=>p,meta:()=>i});var a=e(4848),t=e(8453),c=e(1086),l=e(8877);let i={title:"Swiper Vue.js Components"},o=function(s){let{children:n}=s,e={h1:c.A.h1,h2:c.A.h2,h3:c.A.h3,h4:c.A.h4};return(0,a.jsx)(t.x,{components:e,children:(0,a.jsx)(l.p,{meta:i,children:n})})};function r(s){let n={a:"a",code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,t.R)(),...s.components};return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(n.h2,{id:"installation",children:"Installation"}),"\n",(0,a.jsx)(n.p,{children:"Swiper Vue.js plugin is available only via NPM as a part of the main Swiper library:"}),"\n",(0,a.jsx)(n.pre,{children:(0,a.jsx)(n.code,{children:" npm i swiper\n"})}),"\n",(0,a.jsx)(n.h2,{id:"usage",children:"Usage"}),"\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"swiper/vue"})," exports 2 components: ",(0,a.jsx)(n.code,{children:"Swiper"})," and ",(0,a.jsx)(n.code,{children:"SwiperSlide"}),":"]}),"\n",(0,a.jsx)(n.pre,{className:"language-html",children:(0,a.jsxs)(n.code,{className:"language-html",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"template"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"swiper"]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:":slides-per-view"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"3",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:":space-between"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"50",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:"@swiper"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"onSwiper",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:"@slideChange"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"onSlideChange",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"swiper-slide"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Slide 1",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"swiper-slide"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"swiper-slide"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Slide 2",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"swiper-slide"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"swiper-slide"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Slide 3",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"swiper-slide"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ...\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"swiper"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"template"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"script"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token script",children:(0,a.jsxs)(n.span,{className:"token language-javascript",children:["\n ",(0,a.jsx)(n.span,{className:"token comment",children:"// Import Swiper Vue.js components"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Swiper"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"SwiperSlide"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'swiper/vue'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n\n ",(0,a.jsx)(n.span,{className:"token comment",children:"// Import Swiper styles"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'swiper/css'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token literal-property property",children:"components"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Swiper"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"SwiperSlide"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token function",children:"setup"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"onSwiper"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"swiper"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token console class-name",children:"console"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"log"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"swiper",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"onSlideChange"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token console class-name",children:"console"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"log"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string",children:"'slide change'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n onSwiper",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n onSlideChange",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n"]})}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"script"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n"]})}),"\n","\n",(0,a.jsxs)("div",{className:"important-note",children:["By default Swiper Vue uses core version of Swiper (without any additional modules). If you want to use Navigation, Pagination and ",(0,a.jsx)("a",{href:"/swiper-api/#custom-build",children:"other modules"}),", you have to install them first:"]}),"\n",(0,a.jsxs)(n.p,{children:["Here is the list of additional modules imports from ",(0,a.jsx)(n.code,{children:"swiper/modules"}),":"]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)("code",{children:"Virtual"})," - Virtual Slides module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)("code",{children:"Keyboard"})," - Keyboard Control module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)("code",{children:"Mousewheel"})," - Mousewheel Control module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)("code",{children:"Navigation"})," - Navigation module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)("code",{children:"Pagination"})," - Pagination module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)("code",{children:"Scrollbar"})," - Scrollbar module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)("code",{children:"Parallax"})," - Parallax module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)("code",{children:"FreeMode"})," - Free Mode module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)("code",{children:"Grid"})," - Grid module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)("code",{children:"Manipulation"})," - Slides manipulation module (only for Core version)"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)("code",{children:"Zoom"})," - Zoom module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)("code",{children:"Controller"})," - Controller module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)("code",{children:"A11y"})," - Accessibility module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)("code",{children:"History"})," - History Navigation module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)("code",{children:"HashNavigation"})," - Hash Navigation module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)("code",{children:"Autoplay"})," - Autoplay module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)("code",{children:"EffectFade"})," - Fade Effect module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)("code",{children:"EffectCube"})," - Cube Effect module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)("code",{children:"EffectFlip"})," - Flip Effect module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)("code",{children:"EffectCoverflow"})," - Coverflow Effect module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)("code",{children:"EffectCards"})," - Cards Effect module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)("code",{children:"EffectCreative"})," - Creative Effect module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)("code",{children:"Thumbs"})," - Thumbs module"]}),"\n"]}),"\n",(0,a.jsx)(n.pre,{className:"language-html",children:(0,a.jsxs)(n.code,{className:"language-html",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"template"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"swiper"]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:":modules"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"modules",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:":slides-per-view"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"3",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:":space-between"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"50",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:"navigation"}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:":pagination"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"{ clickable: true }",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:":scrollbar"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"{ draggable: true }",(0,a.jsx)(n.span,{className:"token punctuatio
1n",children:'"'})]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:"@swiper"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"onSwiper",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:"@slideChange"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"onSlideChange",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"swiper-slide"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Slide 1",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"swiper-slide"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"swiper-slide"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Slide 2",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"swiper-slide"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"swiper-slide"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Slide 3",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"swiper-slide"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ...\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"swiper"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"template"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"script"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token script",children:(0,a.jsxs)(n.span,{className:"token language-javascript",children:["\n ",(0,a.jsx)(n.span,{className:"token comment",children:"// import Swiper core and required modules"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Navigation"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Pagination"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Scrollbar"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"A11y"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'swiper/modules'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n\n ",(0,a.jsx)(n.span,{className:"token comment",children:"// Import Swiper Vue.js components"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Swiper"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"SwiperSlide"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'swiper/vue'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n\n ",(0,a.jsx)(n.span,{className:"token comment",children:"// Import Swiper styles"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'swiper/css'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'swiper/css/navigation'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'swiper/css/pagination'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'swiper/css/scrollbar'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n\n ",(0,a.jsx)(n.span,{className:"token comment",children:"// Import Swiper styles"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token literal-property property",children:"components"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Swiper"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"SwiperSlide"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token function",children:"setup"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"onSwiper"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"swiper"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token console class-name",children:"console"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"log"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"swiper",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"onSlideChange"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token console class-name",children:"console"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"log"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token string",children:"'slide change'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n onSwiper",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n onSlideChange",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token literal-property property",children:"modules"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Navigation"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Pagination"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Scrollbar"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"A11y"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"]"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n"]})}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"script"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n"]})}),"\n","\n",(0,a.jsxs)("div",{className:"important-note",children:["Note, Swiper Vue component will create required elements for Navigation, Pagination and Scrollbar if you pass these params without specifying its elements (e.g. without ",(0,a.jsx)("code",{children:"navigation.nextEl"}),", ",(0,a.jsx)("code",{children:"pagination.el"}),", etc.)"]}),"\n",(0,a.jsx)(n.h2,{id:"styles",children:"Styles"}),"\n",(0,a.jsx)(n.p,{children:"Swiper package contains different sets of CSS styles:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"swiper/css"})," - only core Swiper styles"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"swiper/css/bundle"})," - all Swiper styles including all modules styles (like Navigation, Pagination, etc.)"]}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:"Modules styles (not required if you already imported bundle styles):"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"swiper/css/a11y"})," - styles required for A11y module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"swiper/css/autoplay"})," - styles required for Autoplay module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"swiper/css/controller"})," - styles required for Controller module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"swiper/css/effect-cards"})," - styles required for Cards Effect module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"swiper/css/effect-coverflow"})," - styles required for Coverflow Effect module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"swiper/css/effect-creative"})," - styles required for Creative Effect module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"swiper/css/effect-cube"})," - styles required for Cube Effect module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"swiper/css/effect-fade"})," - styles required for Fade Effect module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"swiper/css/effect-flip"})," - styles required for Flip Effect module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"swiper/css/free-mode"})," - styles required for Free Mode module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"swiper/css/grid"})," - styles required for Grid module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"swiper/css/hash-navigation"})," - styles required for Hash Navigation module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"swiper/css/history"})," - styles required for History module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"swiper/css/keyboard"})," - styles required for Keyboard module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"swiper/css/manipulation"})," - styles required for Manipulation module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"swiper/css/mousewheel"})," - styles required for Mousewheel module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"swiper/css/navigation"})," - styles required for Navigation module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"swiper/css/pagination"})," - styles required for Pagination module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"swiper/css/parallax"})," - styles required for Parallax module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"swiper/css/scrollbar"})," - styles required for Scrollbar module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"swiper/css/thumbs"})," - styles required for Thumbs module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"swiper/css/virtual"})," - styles required for Virtual module"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"swiper/css/zoom"})," - styles required for Zoom module"]}),"\n"]}),"\n",(0,a.jsx)(n.h2,{id:"swiper-props",children:"Swiper props"}),"\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"Swiper"})," Vue.js component receive all ",(0,a.jsx)("a",{href:"/swiper-api/#parameters",children:"Swiper parameters"})," as component props, plus some extra props:"]}),"\n",(0,a.jsxs)(n.table,{children:[(0,a.jsx)(n.thead,{children:(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.th,{children:"Prop"}),(0,a.jsx)(n.th,{children:"Type"}),(0,a.jsx)(n.th,{children:"Default"}),(0,a.jsx)(n.th,{children:"Description"})]})}),(0,a.jsxs)(n.tbody,{children:[(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"tag"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"string"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"'div'"})}),(0,a.jsx)(n.td,{children:"Main Swiper container HTML element tag"})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"wrapperTag"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code
1,{children:"string"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"'div'"})}),(0,a.jsx)(n.td,{children:"Swiper wrapper HTML element tag"})]})]})]}),"\n",(0,a.jsx)(n.h2,{id:"swiper-events",children:"Swiper events"}),"\n",(0,a.jsxs)(n.p,{children:["Swiper component supports all ",(0,a.jsx)("a",{href:"/swiper-api/#events",children:"Swiper events"}),", including additional ",(0,a.jsx)(n.code,{children:"swiper"})," event that returns swiper instance as soon as possible. For example:"]}),"\n",(0,a.jsx)(n.pre,{className:"language-html",children:(0,a.jsxs)(n.code,{className:"language-html",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"swiper"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"@swiper"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"...",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"@slideChange"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"...",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"@reachEnd"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"...",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"..."}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"swiper"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n"]})}),"\n",(0,a.jsx)(n.h2,{id:"swiperslide-props",children:"SwiperSlide props"}),"\n",(0,a.jsxs)(n.table,{children:[(0,a.jsx)(n.thead,{children:(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.th,{children:"Prop"}),(0,a.jsx)(n.th,{children:"Type"}),(0,a.jsx)(n.th,{children:"Default"}),(0,a.jsx)(n.th,{children:"Description"})]})}),(0,a.jsxs)(n.tbody,{children:[(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"tag"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"string"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"'div'"})}),(0,a.jsx)(n.td,{children:"Swiper Slide HTML element tag"})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"zoom"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"boolean"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"false"})}),(0,a.jsx)(n.td,{children:"Enables additional wrapper required for zoom mode"})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"virtualIndex"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"number"})}),(0,a.jsx)(n.td,{}),(0,a.jsx)(n.td,{children:"Actual swiper slide index. Required to be set for virtual slides"})]})]})]}),"\n",(0,a.jsx)(n.h2,{id:"swiperslide-slot-props",children:"SwiperSlide slot props"}),"\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"SwiperSlide"})," component has the following slot props:"]}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"isActive"})," - true when current slide is active"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"isPrev"})," - true when current slide is the previous from active"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"isNext"})," - true when current slide is the next from active"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"isVisible"})," - true when current slide is visible (",(0,a.jsx)(n.code,{children:"watchSlidesProgress"})," Swiper parameter must be enabled)"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"isDuplicate"})," - true when current slide is a duplicate slide (when ",(0,a.jsx)(n.code,{children:"loop"})," mode enabled)\nFor example:"]}),"\n"]}),"\n",(0,a.jsx)(n.pre,{className:"language-html",children:(0,a.jsxs)(n.code,{className:"language-html",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"swiper"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"swiper-slide"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"v-slot"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"{ isActive }",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Current slide is {{ isActive ? 'active' : 'not active' }}",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"div"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"swiper-slide"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"swiper"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n"]})}),"\n",(0,a.jsx)(n.h2,{id:"useswiper",children:"useSwiper"}),"\n",(0,a.jsxs)(n.p,{children:["Swiper Vue provides ",(0,a.jsx)(n.code,{children:"useSwiper"})," hook to easliy get the Swiper instance in components inside of Swiper:"]}),"\n",(0,a.jsx)(n.pre,{className:"language-html",children:(0,a.jsxs)(n.code,{className:"language-html",children:[(0,a.jsx)(n.span,{className:"token comment",children:"\x3c!-- some-inner-component.vue --\x3e"}),"\n",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"template"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"button"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"@click"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"swiper.slideNext()",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Slide to the next slide",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"button"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"template"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"script"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token script",children:(0,a.jsxs)(n.span,{className:"token language-javascript",children:["\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," useSwiper ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'swiper/vue'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token function",children:"setup"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," swiper ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useSwiper"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n\n ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n swiper",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n"]})}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"script"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n"]})}),"\n",(0,a.jsx)(n.h2,{id:"useswiperslide",children:"useSwiperSlide"}),"\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"useSwiperSlide"}
1)," is one more hook for components inside of Swiper slides to get the slide data (same data as in ",(0,a.jsx)(n.a,{href:"#swiper-slide-slot-props",children:"SwiperSlide slot props"}),")"]}),"\n",(0,a.jsx)(n.pre,{className:"language-html",children:(0,a.jsxs)(n.code,{className:"language-html",children:[(0,a.jsx)(n.span,{className:"token comment",children:"\x3c!-- some-inner-component.vue --\x3e"}),"\n",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"template"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"p"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Current slide is {{swiperSlide.isActive ? 'active' : 'not active'}}",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"p"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"template"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"script"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token script",children:(0,a.jsxs)(n.span,{className:"token language-javascript",children:["\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," useSwiperSlide ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'swiper/vue'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token function",children:"setup"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," swiperSlide ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useSwiperSlide"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n\n ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n swiperSlide",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n"]})}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"script"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n"]})}),"\n",(0,a.jsx)(n.h2,{id:"slots",children:"Slots"}),"\n",(0,a.jsx)(n.p,{children:'Swiper Vue.js component uses "slots" for content distribution. There are 4 slots available'}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"container-start"})," - element will be added to the beginning of swiper-container"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"container-end"})," (default) - element will be added to the end of swiper-container"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"wrapper-start"})," - element will be added to the beginning of swiper-wrapper"]}),"\n",(0,a.jsxs)(n.li,{children:[(0,a.jsx)(n.code,{children:"wrapper-end"})," - element will be added to the end of swiper-wrapper"]}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:"For example:"}),"\n",(0,a.jsx)(n.pre,{className:"language-html",children:(0,a.jsxs)(n.code,{className:"language-html",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"swiper"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"swiper-slide"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Slide 1",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"swiper-slide"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"swiper-slide"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Slide 2",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"swiper-slide"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"template"]})," ",(0,a.jsxs)(n.span,{className:"token attr-name",children:[(0,a.jsx)(n.span,{className:"token namespace",children:"v-slot:"}),"container-start"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"span"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Container start",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"span"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"template"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"template"]})," ",(0,a.jsxs)(n.span,{className:"token attr-name",children:[(0,a.jsx)(n.span,{className:"token namespace",children:"v-slot:"}),"container-end"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"span"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Container end",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"span"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"template"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"template"]})," ",(0,a.jsxs)(n.span,{className:"token attr-name",children:[(0,a.jsx)(n.span,{className:"token namespace",children:"v-slot:"}),"wrapper-start"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"span"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Wrapper start",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"span"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"template"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"template"]})," ",(0,a.jsxs)(n.span,{className:"token attr-name",children:[(0,a.jsx)(n.span,{className:"token namespace",children:"v-slot:"}),"wrapper-end"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"span"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Wrapper end",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"span"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"template"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"swiper"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n"]})}),"\n",(0,a.jsx)(n.p,{children:"Will be rendered as:"}),"\n",(0,a.jsx)(n.pre,{className:"language-html",children:(0,a.jsxs)(n.code,{className:"language-html",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"class"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"swiper",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"span"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Container start",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"span"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"class"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"swiper-wrapper",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"span"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Wrapper start",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"span"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"class"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"swiper-slide",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Slide 1",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"div"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"div"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"class"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"swiper-slide",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Slide 2",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"div"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"span"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Wrapper end",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"span"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"div"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"span"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Container end",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:
1"token punctuation",children:"</"}),"span"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"div"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n"]})}),"\n",(0,a.jsx)(n.h2,{id:"virtual-slides",children:"Virtual Slides"}),"\n",(0,a.jsxs)(n.p,{children:["Virtual Slides rendering here is fully handled by Vue.js and not required anything except setting ",(0,a.jsx)(n.code,{children:':virtual="true"'})," property and setting ",(0,a.jsx)(n.code,{children:"virtualIndex"})," on slides:"]}),"\n",(0,a.jsx)(n.pre,{className:"language-html",children:(0,a.jsxs)(n.code,{className:"language-html",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"template"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"swiper"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:":modules"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"[Virtual]",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:":slides-per-view"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"3",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:":space-between"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"50",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"virtual"}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"swiper-slide"]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:"v-for"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"(slideContent, index) in slides",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:":key"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"index",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:":virtualIndex"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"index",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"{{slideContent}}",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"swiper-slide"]}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"swiper"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"template"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"script"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token script",children:(0,a.jsxs)(n.span,{className:"token language-javascript",children:["\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Virtual"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'swiper/modules'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Swiper"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"SwiperSlide"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'swiper/vue'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token literal-property property",children:"components"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Swiper"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"SwiperSlide"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n\n ",(0,a.jsx)(n.span,{className:"token function",children:"setup"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token comment",children:"// Create array with 1000 slides"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," slides ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token known-class-name class-name",children:"Array"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token keyword module",children:"from"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token literal-property property",children:"length"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token number",children:"1000"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"map"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsxs)(n.span,{className:"token parameter",children:["el",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," index"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsxs)(n.span,{className:"token template-string",children:[(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"}),(0,a.jsx)(n.span,{className:"token string",children:"Slide "}),(0,a.jsxs)(n.span,{className:"token interpolation",children:[(0,a.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"${"}),"index ",(0,a.jsx)(n.span,{className:"token operator",children:"+"})," ",(0,a.jsx)(n.span,{className:"token number",children:"1"}),(0,a.jsx)(n.span,{className:"token interpolation-punctuation punctuation",children:"}"})]}),(0,a.jsx)(n.span,{className:"token template-punctuation string",children:"`"})]}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n slides",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Virtual"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n"]})}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"script"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n"]})}),"\n",(0,a.jsx)(n.h2,{id:"controller",children:"Controller"}),"\n",(0,a.jsx)(n.p,{children:"Controller requires to pass one Swiper instance to another:"}),"\n",(0,a.jsx)(n.pre,{className:"language-html",children:(0,a.jsxs)(n.code,{className:"language-html",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"template"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsx)(n.span,{className:"token comment",children:"\x3c!-- Main Swiper -> pass controlled swiper instance --\x3e"}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"swiper"]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:":modules"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"[Controller]",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:":controller"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"{ control: controlledSwiper }",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:"..."}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ...\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"swiper"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n\n ",(0,a.jsx)(n.span,{className:"token comment",children:"\x3c!-- Controlled Swiper -> store swiper instance --\x3e"}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"swiper"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:":modules"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"[Controller]",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"@swiper"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"setControlledSwiper",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"..."}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ...\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"swiper"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"template"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"script"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token script",children:(0,a.jsxs)(n.span,{className:"token language-javascript",children:["\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ref ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'vue'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Controller"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'swiper/modules'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Swiper"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"SwiperSlide"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'swiper/vue'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n\n
1 ",(0,a.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token literal-property property",children:"components"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Swiper"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"SwiperSlide"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token function",children:"setup"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," controlledSwiper ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"ref"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token keyword null nil",children:"null"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"setControlledSwiper"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"swiper"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n controlledSwiper",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"value"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," swiper",(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Controller"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n controlledSwiper",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n setControlledSwiper",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n"]})}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"script"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n"]})}),"\n",(0,a.jsx)(n.p,{children:"For two-way control (when both Swipers control each other) it should be like this:"}),"\n",(0,a.jsx)(n.pre,{className:"language-html",children:(0,a.jsxs)(n.code,{className:"language-html",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"template"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"swiper"]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:":modules"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"[Controller]",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:"@swiper"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"setFirstSwiper",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:":controller"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"{ control: secondSwiper }",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:"..."}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ...\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"swiper"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"swiper"]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:":modules"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"[Controller]",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:"@swiper"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"setSecondSwiper",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:":controller"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"{ control: firstSwiper }",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:"..."}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ...\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"swiper"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"template"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"script"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token script",children:(0,a.jsxs)(n.span,{className:"token language-javascript",children:["\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ref ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'vue'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Controller"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'swiper/modules'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Swiper"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"SwiperSlide"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'swiper/vue'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token literal-property property",children:"components"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Swiper"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"SwiperSlide"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token function",children:"setup"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," firstSwiper ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"ref"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token keyword null nil",children:"null"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," secondSwiper ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"ref"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token keyword null nil",children:"null"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"setFirstSwiper"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"swiper"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n firstSwiper",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"value"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," swiper",(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"setSecondSwiper"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"swiper"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n secondSwiper",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"value"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," swiper",(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n\n ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Controller"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n firstSwiper",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n secondSwiper",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n setFirstSwiper",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n setSecondSwiper",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n"]})}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"script"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n"]})}),"\n",(0,a.jsx)(n.h2,{id:"thumbs",children:"Thumbs"}),"\n",(0,a.jsx)(n.p,{children:"Same as with controller we need to store thumbs instance and pass it to main gallery:"}),"\n",(0,a.jsx)(n.pre,{className:"language-html",children:(0,a.jsxs)(n.code,{className:"language-html",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"template"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsx)(n.span,{className:"token comment",children:"\x3c!-- Main Swiper -> pass thumbs swiper instance --\x3e"}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"swiper"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:":modules"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{classN
1ame:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"[Thumbs]",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:":thumbs"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"{ swiper: thumbsSwiper }",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"..."}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ...\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"swiper"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n\n ",(0,a.jsx)(n.span,{className:"token comment",children:"\x3c!-- Thumbs Swiper -> store swiper instance --\x3e"}),"\n ",(0,a.jsx)(n.span,{className:"token comment",children:"\x3c!-- It is also required to set watchSlidesProgress prop --\x3e"}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"swiper"]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:":modules"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"[Thumbs]",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:"watch-slides-progress"}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:"@swiper"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"setThumbsSwiper",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:"..."}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ...\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"swiper"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"template"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"script"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token script",children:(0,a.jsxs)(n.span,{className:"token language-javascript",children:["\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ref ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'vue'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Thumbs"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'swiper/modules'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Swiper"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"SwiperSlide"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'swiper/vue'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token literal-property property",children:"components"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Swiper"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"SwiperSlide"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token function",children:"setup"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," thumbsSwiper ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"ref"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token keyword null nil",children:"null"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:"setThumbsSwiper"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token parameter",children:"swiper"}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n thumbsSwiper",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"value"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," swiper",(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Thumbs"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n thumbsSwiper",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n setThumbsSwiper",(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n"]})}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"script"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n"]})}),"\n",(0,a.jsx)(n.h2,{id:"effects",children:"Effects"}),"\n",(0,a.jsx)(n.p,{children:"The following effects are available:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsx)(n.li,{children:"Fade"}),"\n",(0,a.jsx)(n.li,{children:"Cube"}),"\n",(0,a.jsx)(n.li,{children:"Coverflow"}),"\n",(0,a.jsx)(n.li,{children:"Flip"}),"\n",(0,a.jsx)(n.li,{children:"Cards"}),"\n",(0,a.jsx)(n.li,{children:"Creative"}),"\n"]}),"\n",(0,a.jsx)(n.p,{children:"To use effects you have to import and install them first (as all other modules)."}),"\n",(0,a.jsxs)(n.p,{children:["You can find running ",(0,a.jsx)("a",{href:"https://swiperjs.com/demos/#effect-fade",children:"effect demos here"}),"."]}),"\n",(0,a.jsx)(n.h3,{id:"full-fade-effect-example",children:"Full Fade Effect Example"}),"\n",(0,a.jsx)(n.pre,{className:"language-html",children:(0,a.jsxs)(n.code,{className:"language-html",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"template"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"swiper"]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:":modules"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"[EffectFade]",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"effect"}),(0,a.jsxs)(n.span,{className:"token attr-value",children:[(0,a.jsx)(n.span,{className:"token punctuation attr-equals",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:'"'}),"fade",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"swiper-slide"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Slide 1",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"swiper-slide"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"swiper-slide"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Slide 2",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"swiper-slide"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"swiper-slide"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"Slide 3",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"swiper-slide"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ...\n ",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"swiper"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"template"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n",(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"<"}),"script"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token script",children:(0,a.jsxs)(n.span,{className:"token language-javascript",children:["\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"EffectFade"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'swiper/modules'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsxs)(n.span,{className:"token imports",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Swiper"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"SwiperSlide"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'swiper/vue'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'swiper/css'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'swiper/css/effect-fade'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n\n ",(0,a.jsx)(n.span,{className:"token keyword module",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token literal-property property",children:"components"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"Swiper"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"SwiperSlide"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token function",children:"setup"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword control-flow",children:"return"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"\n ",(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"EffectFade"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)
1(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n"]})}),(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsxs)(n.span,{className:"token tag",children:[(0,a.jsx)(n.span,{className:"token punctuation",children:"</"}),"script"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n"]})}),"\n",(0,a.jsx)(n.h2,{id:"what-next",children:"What next?"}),"\n",(0,a.jsx)(n.p,{children:"As you see it is really easy to integrate Swiper into your website or app. So here are your next steps:"}),"\n",(0,a.jsxs)(n.ul,{children:["\n",(0,a.jsxs)(n.li,{children:["Go to ",(0,a.jsx)("a",{href:"../swiper-api/",children:"API Documentation"})," to learn more about all Swiper API and how to control it."]}),"\n",(0,a.jsxs)(n.li,{children:["Look at available ",(0,a.jsx)("a",{href:"../demos/",target:"_blank",children:"Demos"}),"."]}),"\n",(0,a.jsxs)(n.li,{children:["If you have questions about Swiper ask them in ",(0,a.jsx)("a",{href:"http://stackoverflow.com",target:"_blank",children:"StackOverflow"})," or ",(0,a.jsx)("a",{href:"https://github.com/nolimits4web/swiper/discussions",target:"_blank",children:"Swiper Discussions"}),"."]}),"\n",(0,a.jsxs)(n.li,{children:["Create issue on ",(0,a.jsx)("a",{href:"https://github.com/nolimits4web/swiper/",target:"_blank",children:"GitHub"})," if you found a bug."]}),"\n"]})]})}function p(){let s=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,a.jsx)(o,{...s,children:(0,a.jsx)(r,{...s})})}},8453:(s,n,e)=>{"use strict";e.d(n,{R:()=>l,x:()=>i});var a=e(6540);let t={},c=a.createContext(t);function l(s){let n=a.useContext(c);return a.useMemo(function(){return"function"==typeof s?s(n):{...n,...s}},[n,s])}function i(s){let n;return n=s.disableParentContext?"function"==typeof s.components?s.components(t):s.components||t:l(s.components),a.createElement(c.Provider,{value:n},s.children)}},1086:(s,n,e)=>{"use strict";e.d(n,{A:()=>c});var a=e(4848),t=e(4164);function c(s){let{level:n,id:e,link:c=!0,children:l,number:i,className:o="",style:r={},...p}=s;return(0,a.jsxs)("h".concat(n),{className:(0,t.A)("group flex whitespace-pre-wrap",o),id:e,style:{...r},...p,children:[c&&(0,a.jsx)("a",{href:"#".concat(e),className:"after:hash absolute opacity-0 group-hover:opacity-100",style:{marginLeft:"-1em",paddingRight:"0.5em",color:"#a1a1aa",textDecoration:"none"},"aria-label":"Anchor"}),(0,a.jsx)("span",{children:l})]})}c.h1=s=>(0,a.jsx)(c,{level:1,...s}),c.h2=s=>(0,a.jsx)(c,{level:2,...s}),c.h3=s=>(0,a.jsx)(c,{level:3,...s}),c.h4=s=>(0,a.jsx)(c,{level:4,...s})},8877:(s,n,e)=>{"use strict";e.d(n,{p:()=>g});var a=e(4848),t=e(6540),c=e(6715),l=e(1106),i=e(3368),o=e(4164);let r=s=>{let[n,e]=(0,t.useState)(s),a=(0,t.useRef)([]),c=(0,t.useRef)(0),l=()=>{let s=document.querySelectorAll(".prose h2[id], .prose h3[id]");for(let n=0;n<s.length;n+=1){let e=s[n];a.current.push({el:e,id:e.id})}},i=()=>{let s=window.scrollY;c.current=window.innerHeight,a.current.forEach(n=>{let e=n.el.getBoundingClientRect();n.offset=s+e.top})},o=()=>{let s=a.current[0],n=window.scrollY,t=a.current.filter(s=>{let{offset:e}=s;return e>=n})[0];a.current.forEach(e=>{n+c.current/2>e.offset&&(s=e)}),a.current.indexOf(t)<a.current.indexOf(s)&&(s=t),s&&s.id&&e(s.id)},r=()=>{o()},p=()=>{i(),o()},d=()=>{window.addEventListener("scroll",r),window.addEventListener("resize",p)},u=()=>{window.removeEventListener("scroll",r),window.removeEventListener("resize",p)};return(0,t.useEffect)(()=>(l(),i(),o(),d(),()=>u()),[]),n};function p(s){let{tableOfContents:n,onClick:e}=s,c=r(n[0].slug);return(0,a.jsx)("ul",{className:"table-of-contents overflow-x-hidden shrink-0",onClick:e,children:n.map(s=>{let n=c===s.slug,e=s.children.findIndex(s=>{let{slug:n}=s;return n===c})>-1;return(0,a.jsxs)(t.Fragment,{children:[(0,a.jsx)("li",{className:"my-1",children:(0,a.jsx)("a",{href:"#".concat(s.slug),className:(0,o.A)("block rounded-full py-1.5 !text-on-surface-darker !no-underline",{"hover:!text-on-surface-dark":!n,"!text-primary":e,"!text-primary":n}),children:s.title})}),s.children.map(s=>{let n=c===s.slug;return(0,a.jsx)("li",{className:"ml-2",children:(0,a.jsx)("a",{href:"#".concat(s.slug),className:(0,o.A)("block rounded-full px-3 py-1 !text-on-surface-darker !no-underline",{"hover:!text-on-surface-dark":!n,"!text-primary":n}),children:s.title})},s.slug)})]},s.slug)})})}var d=e(6033);let u=[...e(1061),...d],m=s=>s.startsWith("http")?s:"/images/sponsors/".concat(s);function h(){return window.__NO_SPONSORS__?null:(0,a.jsxs)("div",{className:"mb-4","data-sponsors":"",children:[(0,a.jsxs)("div",{className:"mb-2 flex items-center justify-between",children:[(0,a.jsx)("span",{children:"Sponsors"}),(0,a.jsx)("a",{href:"https://sponsors.nolimits4web.com",target:"_blank",className:"text-xs text-primary no-underline",children:"Become a sponsor"})]}),(0,a.jsx)("div",{className:"flex flex-wrap gap-1",children:u.filter(s=>{let{plan:n,active:e}=s;return"Sponsor"!==n&&e}).map((s,n)=>{let{link:e,title:t,image:c}=s;return(0,a.jsx)("a",{className:"flex items-center justify-center hover:opacity-80 bg-white",href:e,title:t+n,rel:"sponsored",target:"_blank",children:c&&(0,a.jsx)("img",{className:"h-7 w-7 object-contain lg:h-8 lg:w-8",alt:t,loading:"lazy",src:m(c)})},t)})})]})}let x=t.useLayoutEffect;var j=e(8578),k=e(1325),N=e(1773);function g(s){let{children:n,meta:e={},pageTitle:o="",beforePageTitle:r="",afterPageTitle:d=""}=s,u=(0,c.useRouter)(),m=(0,t.useRef)(null),[g,w]=(0,t.useState)([]),[f,y]=(0,t.useState)(!1);return x(()=>{let s;let n=[];
1return m.current.querySelectorAll("h2, h3").forEach(e=>{let a=e.getAttribute("id"),t=e.textContent.trim();s="h3"===e.nodeName.toLowerCase();let c={slug:a,title:t,children:[]};if(s){let s=Math.max(n.length-1,0);n[s]||(n[s]={children:[]}),n[s].children.push(c)}else n.push(c)}),w(n),()=>{}},[]),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(N.s,{withSidebar:!0}),(0,a.jsxs)("div",{id:e.containerId,className:"mx-auto flex w-full justify-between px-4 sm:px-6 md:px-8 relative",children:[e&&(0,a.jsxs)(i,{children:[(0,a.jsx)("title",{children:e.title},"title"),(0,a.jsx)("meta",{property:"og:title",content:e.title}),(0,a.jsx)("meta",{name:"twitter:title",content:e.title}),e.description&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("meta",{name:"description",content:e.description},"description"),(0,a.jsx)("meta",{property:"og:description",content:e.description},"og:description"),(0,a.jsx)("meta",{name:"twitter:description",content:e.description},"twitter:description")]})]}),(0,a.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:()=>y(!0),children:(0,a.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,a.jsx)("path",{d:"M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"})})}),(0,a.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:()=>y(!1)}),(0,a.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,a.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,a.jsx)(h,{}),g.length>0&&(0,a.jsx)(p,{onClick:s=>{s.target&&s.target.closest("a")&&y(!1)},tableOfContents:g})]})}),(0,a.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:m,children:[r,(o||e.title)&&(0,a.jsx)("h1",{children:o||e.title}),d,n,(0,a.jsx)("div",{className:"mt-4 border-t border-outline pt-4 text-right text-sm",children:(0,a.jsx)(l,{href:"https://github.com/nolimits4web/swiper-website/edit/master/src/pages".concat(u.pathname,".mdx"),children:"Edit this page on GitHub"})})]}),(0,a.jsx)("div",{className:"hidden h-px w-[calc(256px+40px)] shrink-0 2xl:block"})]}),(0,a.jsx)(k.A,{})]})}}},s=>{var n=n=>s(s.s=n);s.O(0,[950,636,593,792],()=>n(8192)),_N_E=s.O()}]);
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.