1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[429],{316:(s,n,e)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/react",function(){return e(4114)}])},4114:(s,n,e)=>{"use strict";e.r(n),e.d(n,{default:()=>p,meta:()=>i});var a=e(4848),c=e(8453),t=e(1086),l=e(8877);let i={title:"Swiper React Components"},o=function(s){let{children:n}=s,e={h1:t.A.h1,h2:t.A.h2,h3:t.A.h3,h4:t.A.h4};return(0,a.jsx)(c.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,c.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 React 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/react"})," 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-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(0,a.jsx)(n.span,{className:"token comment",children:"// Import Swiper React 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/react'"}),(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:"("}),(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 keyword control-flow",children:"return"})," ",(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:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Swiper"})]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:"spaceBetween"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token number",children:"50"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:"slidesPerView"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token number",children:"3"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:"onSlideChange"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation 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 punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(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 attr-name",children:"onSwiper"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation 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 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 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 plain-text",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:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"SwiperSlide"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",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:"</"}),(0,a.jsx)(n.span,{className:"token class-name",children:"SwiperSlide"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",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:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"SwiperSlide"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",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:"</"}),(0,a.jsx)(n.span,{className:"token class-name",children:"SwiperSlide"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",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:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"SwiperSlide"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",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:"</"}),(0,a.jsx)(n.span,{className:"token class-name",children:"SwiperSlide"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",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:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"SwiperSlide"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"Slide 4"}),(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:"</"}),(0,a.jsx)(n.span,{className:"token class-name",children:"SwiperSlide"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",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:"</"}),(0,a.jsx)(n.span,{className:"token class-name",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 punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n"]})}),"\n","\n",(0,a.jsxs)("div",{className:"important-note",children:["By default Swiper React 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-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(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 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/react'"}),(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 keyword module",children:"export"})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"default"})," ",(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 keyword control-flow",children:"return"})," ",(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:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Swiper"})]}),"\n ",(0,a.jsx)(n.span,{className:"token comment",children:"// install Swip
1er modules"}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:"modules"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation 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 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 attr-name",children:"spaceBetween"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token number",children:"50"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:"slidesPerView"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token number",children:"3"}),(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 script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation 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 literal-property property",children:"clickable"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token boolean",children:"true"})," ",(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 attr-name",children:"scrollbar"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation 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 literal-property property",children:"draggable"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token boolean",children:"true"})," ",(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 attr-name",children:"onSwiper"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation 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 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 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 attr-name",children:"onSlideChange"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation 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 punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(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 plain-text",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:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"SwiperSlide"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",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:"</"}),(0,a.jsx)(n.span,{className:"token class-name",children:"SwiperSlide"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",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:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"SwiperSlide"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",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:"</"}),(0,a.jsx)(n.span,{className:"token class-name",children:"SwiperSlide"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",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:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"SwiperSlide"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",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:"</"}),(0,a.jsx)(n.span,{className:"token class-name",children:"SwiperSlide"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",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:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"SwiperSlide"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"Slide 4"}),(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:"</"}),(0,a.jsx)(n.span,{className:"token class-name",children:"SwiperSlide"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",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:"</"}),(0,a.jsx)(n.span,{className:"token class-name",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 punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n"]})}),"\n","\n",(0,a.jsxs)("div",{className:"important-note",children:["Note, Swiper React 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"})," React 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,{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"})]}),(0,a.jsxs)(n.tr,{children:[(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"onSwiper"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"(swiper) => void"})}),(0,a.jsx)(n.td,{children:(0,a.jsx)(n.code,{children:"'div'"})}),(0,a.jsx)(n.td,{children:"Callback that receives Swiper instance"})]})]})]}),"\n",(0,a.jsxs)(n.p,{children:["Also it supports all ",(0,a.jsx)("a",{href:"/swiper-api/#events",children:"Swiper events"})," in ",(0,a.jsx)(n.code,{children:"on{Eventname}"})," format. For example ",(0,a.jsx)(n.code,{children:"slideChange"})," event becomes ",(0,a.jsx)(n.code,{children:"onSlideChange"})," prop:"]}),"\n",(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",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:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Swiper"})]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:"onSlideChange"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation 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 punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token comment",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 attr-name",children:"onReachEnd"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation 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 punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"}),"
1",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token comment",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 attr-name",children:"..."}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",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-render-function",children:"SwiperSlide render function"}),"\n",(0,a.jsxs)(n.p,{children:[(0,a.jsx)(n.code,{children:"SwiperSlide"})," component can accept render function that receives an object with the following properties:"]}),"\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-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",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:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Swiper"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",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:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"SwiperSlide"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"\n "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsxs)(n.span,{className:"token parameter",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:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",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:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"Current slide is "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"isActive ",(0,a.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'active'"})," ",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'not active'"}),(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:"</"}),"div"]}),(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:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",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:"</"}),(0,a.jsx)(n.span,{className:"token class-name",children:"SwiperSlide"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",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:"</"}),(0,a.jsx)(n.span,{className:"token class-name",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 React 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-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(0,a.jsx)(n.span,{className:"token comment",children:"// some-inner-component.jsx"}),"\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:"React"})," ",(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:"'react'"}),(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:"{"})," 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/react'"}),(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 keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"SlideNextButton"})}),(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 ",(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:"onClick"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation 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 punctuation",children:")"})," ",(0,a.jsx)(n.span,{className:"token arrow operator",children:"=>"})," swiper",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token method function property-access",children:"slideNext"}),(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 punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",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.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:"}"}),"\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-render-function",children:"SwiperSlide render function"}),")"]}),"\n",(0,a.jsx)(n.pre,{className:"language-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(0,a.jsx)(n.span,{className:"token comment",children:"// some-inner-component.jsx"}),"\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:"React"})," ",(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:"'react'"}),(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:"{"})," 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/react'"}),(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 keyword",children:"function"})," ",(0,a.jsx)(n.span,{className:"token function",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"SlideTitle"})}),(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 ",(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:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"Current slide is "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"swiperSlide",(0,a.jsx)(n.span,{className:"token punctuation",children:"."}),(0,a.jsx)(n.span,{className:"token property-access",children:"isActive"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"?"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'active'"})," ",(0,a.jsx)(n.span,{className:"token operator",children:":"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'not active'"}),(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:"</"}),"p"]}),(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:"}"}),"\n"]})}),"\n",(0,a.jsx)(n.h2,{id:"slots",children:"Slots"}),"\n",(0,a.jsx)(n.p,{children:'Swiper React 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-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",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:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Swiper"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",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:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"SwiperSlide"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",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:"</"}),(0,a.jsx)(n.span,{className:"token class-name",children:"SwiperSlide"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",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:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"SwiperSlide"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",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:"</"}),(0,a.jsx)(n.span,{className:"token class-name",children:"SwiperSlide"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",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 attr-name",children:"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:'"'}),"container-start",(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 plain-text",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.jsx)(n.span,{className:"token plain-text",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 attr-name",children:"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:'"'}),"container-end",(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 plain-text",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.jsx)(n.span,{className:"token plain-text",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 attr-name",children:"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:'"'}),"wrapper-start",(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 plain-text",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.jsx)(n.span,{className:"token plain-text",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 attr-name",children:"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:'"'}),"wrapper-end",(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 plain-text",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.jsx)(n.span,{className:"token plain-text",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:"</"}),(0,a.jsx)(n.span,{className:"token class-name",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 attr-name",children:"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:'"'}),"container-start",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(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 attr-name",children:"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:'"'}),"wrapper-start",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(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 attr-name",children:"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:'"'}),"wrapper-end",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(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
1)(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 attr-name",children:"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:'"'}),"container-end",(0,a.jsx)(n.span,{className:"token punctuation",children:'"'})]}),(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:">"})]}),"\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 React 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-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(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/react'"}),(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/virtual'"}),(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:"("}),(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 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\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.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:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Swiper"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"modules"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation 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 maybe-class-name",children:"Virtual"}),(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:"spaceBetween"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token number",children:"50"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"slidesPerView"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token number",children:"3"}),(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:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"\n "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"slides",(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:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsxs)(n.span,{className:"token parameter",children:["slideContent",(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.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:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"SwiperSlide"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"key"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"slideContent",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"virtualIndex"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(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 punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"\n "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"slideContent",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",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:"</"}),(0,a.jsx)(n.span,{className:"token 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:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",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:"</"}),(0,a.jsx)(n.span,{className:"token class-name",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 punctuation",children:"}"}),(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-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[" ",(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 maybe-class-name",children:"React"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," useState ",(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:"'react'"}),(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/react'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n\n ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"App"})})," ",(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 comment",children:"// store controlled swiper instance"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"controlledSwiper",(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 operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(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\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.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:"<"}),"main"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"\n "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token comment",children:"/* Main Swiper -> pass controlled swiper instance */"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",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:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Swiper"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"modules"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",children:"="}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token punctuation",children:
1"["}),(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 punctuation",children:"}"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"controller"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation 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 literal-property property",children:"control"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," controlledSwiper ",(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.jsx)(n.span,{className:"token plain-text",children:"\n "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token comment",children:"/* ... */"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",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:"</"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Swiper"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"\n\n "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token comment",children:"/* Controlled Swiper -> store swiper instance */"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",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:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Swiper"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"modules"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation 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 maybe-class-name",children:"Controller"}),(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:"onSwiper"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",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:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"\n "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token comment",children:"/* ... */"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",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:"</"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Swiper"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",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:"</"}),"main"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),"\n ",(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-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(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 maybe-class-name",children:"React"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," useState ",(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:"'react'"}),(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/react'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:";"}),"\n\n",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"App"})})," ",(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 comment",children:"// store swiper instances"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"firstSwiper",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setFirstSwiper",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(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 punctuation",children:"["}),"secondSwiper",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setSecondSwiper",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(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\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.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:"<"}),"main"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",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:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Swiper"})]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:"modules"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation 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 maybe-class-name",children:"Controller"}),(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 attr-name",children:"onSwiper"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",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 script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation 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 literal-property property",children:"control"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," secondSwiper ",(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 plain-text",children:"\n "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token comment",children:"/* ... */"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",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:"</"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Swiper"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",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:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Swiper"})]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:"modules"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation 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 maybe-class-name",children:"Controller"}),(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 attr-name",children:"onSwiper"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",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 script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation 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 literal-property property",children:"control"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," firstSwiper ",(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 plain-text",children:"\n "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token comment",children:"/* ... */"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",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:"</"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Swiper"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",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:"</"}),"main"]}),(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"]})}),"\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-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[" ",(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 maybe-class-name",children:"React"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"{"})," useState ",(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:"'react'"}),(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/react'"}),(0,a.jsx)(n.span,{className:"token punctuation",children:
1";"}),"\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\n ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token function-variable function",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"App"})})," ",(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 comment",children:"// store thumbs swiper instance"}),"\n ",(0,a.jsx)(n.span,{className:"token keyword",children:"const"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"["}),"thumbsSwiper",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," setThumbsSwiper",(0,a.jsx)(n.span,{className:"token punctuation",children:"]"})," ",(0,a.jsx)(n.span,{className:"token operator",children:"="})," ",(0,a.jsx)(n.span,{className:"token function",children:"useState"}),(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\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.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:"<"}),"main"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"\n "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token comment",children:"/* Main Swiper -> pass thumbs swiper instance */"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",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:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Swiper"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"modules"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation 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 maybe-class-name",children:"Thumbs"}),(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:"thumbs"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation 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 literal-property property",children:"swiper"}),(0,a.jsx)(n.span,{className:"token operator",children:":"})," thumbsSwiper ",(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.jsx)(n.span,{className:"token plain-text",children:"\n "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token comment",children:"/* ... */"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",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:"</"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Swiper"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"\n\n "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token comment",children:"/* Thumbs Swiper -> store swiper instance */"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",children:"\n "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token comment",children:"/* It is also required to set watchSlidesProgress prop */"})," ",(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",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:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Swiper"})]}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:"modules"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation 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 maybe-class-name",children:"Thumbs"}),(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 attr-name",children:"watchSlidesProgress"}),"\n ",(0,a.jsx)(n.span,{className:"token attr-name",children:"onSwiper"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation punctuation",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:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"\n "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),(0,a.jsx)(n.span,{className:"token comment",children:"/* ... */"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",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:"</"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Swiper"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",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:"</"}),"main"]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),"\n ",(0,a.jsx)(n.span,{className:"token punctuation",children:")"}),"\n ",(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-jsx",children:(0,a.jsxs)(n.code,{className:"language-jsx",children:[(0,a.jsx)(n.span,{className:"token keyword module",children:"import"})," ",(0,a.jsx)(n.span,{className:"token imports",children:(0,a.jsx)(n.span,{className:"token maybe-class-name",children:"React"})})," ",(0,a.jsx)(n.span,{className:"token keyword module",children:"from"})," ",(0,a.jsx)(n.span,{className:"token string",children:"'react'"}),(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/react'"}),(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:"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\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:"("}),(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 keyword control-flow",children:"return"})," ",(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:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"Swiper"})]})," ",(0,a.jsx)(n.span,{className:"token attr-name",children:"modules"}),(0,a.jsxs)(n.span,{className:"token script language-javascript",children:[(0,a.jsx)(n.span,{className:"token script-punctuation 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 maybe-class-name",children:"EffectFade"}),(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:"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:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"\n "}),(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 number",children:"1"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token number",children:"2"}),(0,a.jsx)(n.span,{className:"token punctuation",children:","})," ",(0,a.jsx)(n.span,{className:"token number",children:"3"}),(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:"("}),(0,a.jsx)(n.span,{className:"token punctuation",children:"("}),(0,a.jsxs)(n.span,{className:"token parameter",children:["i",(0,a.jsx)(n.span,{className:"token punctuation",children:","})," el"]}),(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 keyword control-flow",children:"return"})," ",(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:"<"}),(0,a.jsx)(n.span,{className:"token class-name",children:"SwiperSlide"})]}),(0,a.jsx)(n.span,{className:"token punctuation",children:">"})]}),(0,a.jsx)(n.span,{className:"token plain-text",children:"Slide "}),(0,a.jsx)(n.span,{className:"token punctuation",children:"{"}),"el",(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:"</"}),(0,a.jsx)(n.span,{className:"token class-name",children:"SwiperSlide"})]}),(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:")"}),(0,a.jsx)(n.span,{className:"token punctuation",children:"}"}),(0,a.jsx)(n.span,{className:"token plain-text",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:"</"}),(0,a.jsx)(n.span,{className:"token class-name",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 punctuation",children:"}"}),(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",childr
1en:"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 c={},t=a.createContext(c);function l(s){let n=a.useContext(t);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(c):s.components||c:l(s.components),a.createElement(t.Provider,{value:n},s.children)}},1086:(s,n,e)=>{"use strict";e.d(n,{A:()=>t});var a=e(4848),c=e(4164);function t(s){let{level:n,id:e,link:t=!0,children:l,number:i,className:o="",style:r={},...p}=s;return(0,a.jsxs)("h".concat(n),{className:(0,c.A)("group flex whitespace-pre-wrap",o),id:e,style:{...r},...p,children:[t&&(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})]})}t.h1=s=>(0,a.jsx)(t,{level:1,...s}),t.h2=s=>(0,a.jsx)(t,{level:2,...s}),t.h3=s=>(0,a.jsx)(t,{level:3,...s}),t.h4=s=>(0,a.jsx)(t,{level:4,...s})},8877:(s,n,e)=>{"use strict";e.d(n,{p:()=>g});var a=e(4848),c=e(6540),t=e(6715),l=e(1106),i=e(3368),o=e(4164);let r=s=>{let[n,e]=(0,c.useState)(s),a=(0,c.useRef)([]),t=(0,c.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;t.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,c=a.current.filter(s=>{let{offset:e}=s;return e>=n})[0];a.current.forEach(e=>{n+t.current/2>e.offset&&(s=e)}),a.current.indexOf(c)<a.current.indexOf(s)&&(s=c),s&&s.id&&e(s.id)},r=()=>{o()},p=()=>{i(),o()},d=()=>{window.addEventListener("scroll",r),window.addEventListener("resize",p)},m=()=>{window.removeEventListener("scroll",r),window.removeEventListener("resize",p)};return(0,c.useEffect)(()=>(l(),i(),o(),d(),()=>m()),[]),n};function p(s){let{tableOfContents:n,onClick:e}=s,t=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=t===s.slug,e=s.children.findIndex(s=>{let{slug:n}=s;return n===t})>-1;return(0,a.jsxs)(c.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=t===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 m=[...e(1061),...d],u=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:m.filter(s=>{let{plan:n,active:e}=s;return"Sponsor"!==n&&e}).map((s,n)=>{let{link:e,title:c,image:t}=s;return(0,a.jsx)("a",{className:"flex items-center justify-center hover:opacity-80 bg-white",href:e,title:c+n,rel:"sponsored",target:"_blank",children:t&&(0,a.jsx)("img",{className:"h-7 w-7 object-contain lg:h-8 lg:w-8",alt:c,loading:"lazy",src:u(t)})},c)})})]})}let x=c.useLayoutEffect;var j=e(8578),k=e(1325),N=e(2888);function g(s){let{children:n,meta:e={},pageTitle:o="",beforePageTitle:r="",afterPageTitle:d=""}=s,m=(0,t.useRouter)(),u=(0,c.useRef)(null),[g,w]=(0,c.useState)([]),[f,y]=(0,c.useState)(!1);return x(()=>{let s;let n=[];
1return u.current.querySelectorAll("h2, h3").forEach(e=>{let a=e.getAttribute("id"),c=e.textContent.trim();s="h3"===e.nodeName.toLowerCase();let t={slug:a,title:c,children:[]};if(s){let s=Math.max(n.length-1,0);n[s]||(n[s]={children:[]}),n[s].children.push(t)}else n.push(t)}),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:u,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(m.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(316)),_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.