12:[["$","main",null,{"children":[["$","$L5",null,{"maxW":"100%","children":[["$","$L20","div-0",{"code":"import { Swiper, useSwiper } from 'welcome-ui/Swiper'\n\nconst Example = () => {\n const swiper = useSwiper({ spaceBetween: 0 })\n\n return (\n \n \n \n \n \n )\n}\n\nexport default Example\n","isOverview":true,"mt":0,"name":"Swiper","pathToFile":"/Swiper/docs/examples/overview.tsx","withCodeEditor":true}]]}],["$","$L5",null,{"maxW":"100%","children":[["$","$Lf","h2-0",{"alignItems":"center","as":"h2","borderBottom":"1px solid","borderBottomColor":"neutral-30","display":"flex","id":"examples","mt":"3xl","pb":"sm","style":{"scrollMarginTop":170},"variant":"h3","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#examples","textDecoration":{"hover":"underline"},"children":"Examples"}]}]]}],["$","$L5",null,{"maxW":"100%","children":[["$","$Lf","h3-0",{"as":"h3","id":"slides-per-view","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#slides-per-view","textDecoration":{"hover":"underline"},"children":"Slides per view"}]}],"\n",["$","$L21","p-0",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Providing ","position":{"start":{"line":4,"column":1,"offset":22},"end":{"line":4,"column":11,"offset":32}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"slidesPerView","position":{"start":{"line":4,"column":11,"offset":32},"end":{"line":4,"column":26,"offset":47}}}],"position":{"start":{"line":4,"column":11,"offset":32},"end":{"line":4,"column":26,"offset":47}}},{"type":"text","value":" with ","position":{"start":{"line":4,"column":26,"offset":47},"end":{"line":4,"column":32,"offset":53}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"{ mobile: 1, tablet: 1, desktop: 2 }","position":{"start":{"line":4,"column":32,"offset":53},"end":{"line":4,"column":70,"offset":91}}}],"position":{"start":{"line":4,"column":32,"offset":53},"end":{"line":4,"column":70,"offset":91}}},{"type":"text","value":" will show 1 slide per view on mobile and tablet and 2 slides per view on desktop.","position":{"start":{"line":4,"column":70,"offset":91},"end":{"line":4,"column":152,"offset":173}}}],"position":{"start":{"line":4,"column":1,"offset":22},"end":{"line":4,"column":152,"offset":173}}},"children":["Providing ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"slidesPerView"}]," with ",["$","$L5","code-1",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"{ mobile: 1, tablet: 1, desktop: 2 }"}]," will show 1 slide per view on mobile and tablet and 2 slides per view on desktop."]}],"\n",["$","$L20","div-0",{"code":"import { Swiper, useSwiper } from 'welcome-ui/Swiper'\n\nconst Example = () => {\n const swiper = useSwiper({ slidesPerView: { desktop: 2, mobile: 1, tablet: 1 } })\n\n return (\n \n \n \n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Swiper","pathToFile":"/Swiper/docs/examples/slides-per-view.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-1",{"as":"h3","id":"first-slide-to-show","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#first-slide-to-show","textDecoration":{"hover":"underline"},"children":"First slide to show"}]}],"\n",["$","$L21","p-1",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By providing ","position":{"start":{"line":10,"column":1,"offset":275},"end":{"line":10,"column":14,"offset":288}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"firstSlideToShow","position":{"start":{"line":10,"column":14,"offset":288},"end":{"line":10,"column":32,"offset":306}}}],"position":{"start":{"line":10,"column":14,"offset":288},"end":{"line":10,"column":32,"offset":306}}},{"type":"text","value":" with ","position":{"start":{"line":10,"column":32,"offset":306},"end":{"line":10,"column":38,"offset":312}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"2","position":{"start":{"line":10,"column":38,"offset":312},"end":{"line":10,"column":41,"offset":315}}}],"position":{"start":{"line":10,"column":38,"offset":312},"end":{"line":10,"column":41,"offset":315}}},{"type":"text","value":", the swiper will begin on the second slide.","position":{"start":{"line":10,"column":41,"offset":315},"end":{"line":10,"column":85,"offset":359}}}],"position":{"start":{"line":10,"column":1,"offset":275},"end":{"line":10,"column":85,"offset":359}}},"children":["By providing ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"firstSlideToShow"}]," with ",["$","$L5","code-1",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"2"}],", the swiper will begin on the second slide."]}],"\n",["$","$L20","div-1",{"code":"import { Swiper, useSwiper } from 'welcome-ui/Swiper'\n\nconst Example = () => {\n const swiper = useSwiper({ firstSlideToShow: 2 })\n\n return (\n \n \n \n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Swiper","pathToFile":"/Swiper/docs/examples/first.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-2",{"as":"h3","id":"centered-slides","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#centered-slides","textDecoration":{"hover":"underline"},"children":"Centered slides"}]}],"\n",["$","$L21","p-2",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By providing ","position":{"start":{"line":16,"column":1,"offset":447},"end":{"line":16,"column":14,"offset":460}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"centeredSlides","position":{"start":{"line":16,"column":14,"offset":460},"end":{"line":16,"column":30,"offset":476}}}],"position":{"start":{"line":16,"column":14,"offset":460},"end":{"line":16,"column":30,"offset":476}}},{"type":"text","value":", the swiper will begin on the middle slide, ","position":{"start":{"line":16,"column":30,"offset":476},"end":{"line":16,"column":75,"offset":521}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"firstSlideToShow","position":{"start":{"line":16,"column":75,"offset":521},"end":{"line":16,"column":93,"offset":539}}}],"position":{"start":{"line":16,"column":75,"offset":521},"end":{"line":16,"column":93,"offset":539}}},{"type":"text","value":" won't be used in this case.","position":{"start":{"line":16,"column":93,"offset":539},"end":{"line":16,"column":121,"offset":567}}}],"position":{"start":{"line":16,"column":1,"offset":447},"end":{"line":16,"column":121,"offset":567}}},"children":["By providing ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"centeredSlides"}],", the swiper will begin on the middle slide, ",["$","$L5","code-1",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"firstSlideToShow"}]," won't be used in this case."]}],"\n",["$","$L20","div-2",{"code":"import { Swiper, useSwiper } from 'welcome-ui/Swiper'\n\nconst Example = () => {\n const swiper = useSwiper({ centeredSlides: true, firstSlideToShow: 2 })\n\n return (\n \n \n \n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Swiper","pathToFile":"/Swiper/docs/examples/centered.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-3",{"as":"h3","id":"autoplay","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#autoplay","textDecoration":{"hover":"underline"},"children":"Autoplay"}]}],"\n",["$","$L21","p-3",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Providing ","position":{"start":{"line":22,"column":1,"offset":651},"end":{"line":22,"column":11,"offset":661}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoplay","position":{"start":{"line":22,"column":11,"offset":661},"end":{"line":22,"column":21,"offset":671}}}],"position":{"start":{"line":22,"column":11,"offset":661},"end":{"line":22,"column":21,"offset":671}}},{"type":"text","value":" lets the slides advance automatically. Pass ","position":{"start":{"line":22,"column":21,"offset":671},"end":{"line":22,"column":66,"offset":716}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"duration","position":{"start":{"line":22,"column":66,"offset":716},"end":{"line":22,"column":76,"offset":726}}}],"position":{"start":{"line":22,"column":66,"offset":716},"end":{"line":22,"column":76,"offset":726}}},{"type":"text","value":" to control the amount of time each slide shows for.","position":{"start":{"line":22,"column":76,"offset":726},"end":{"line":22,"column":128,"offset":778}}}],"position":{"start":{"line":22,"column":1,"offset":651},"end":{"line":22,"column":128,"offset":778}}},"children":["Providing ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"autoplay"}]," lets the slides advance automatically. Pass ",["$","$L5","code-1",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"duration"}]," to control the amount of time each slide shows for."]}],"\n",["$","$L20","div-3",{"code":"import { Swiper, useSwiper } from 'welcome-ui/Swiper'\n\nconst Example = () => {\n const swiper = useSwiper({ autoplay: true, loop: true })\n\n return (\n \n \n \n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Swiper","pathToFile":"/Swiper/docs/examples/autoplay.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-4",{"as":"h3","id":"with-pagination","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#with-pagination","textDecoration":{"hover":"underline"},"children":"With pagination"}]}],"\n",["$","$L21","p-4",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By providing the optional ","position":{"start":{"line":28,"column":1,"offset":869},"end":{"line":28,"column":27,"offset":895}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"withPagination","position":{"start":{"line":28,"column":27,"offset":895},"end":{"line":28,"column":43,"offset":911}}}],"position":{"start":{"line":28,"column":27,"offset":895},"end":{"line":28,"column":43,"offset":911}}},{"type":"text","value":" with ","position":{"start":{"line":28,"column":43,"offset":911},"end":{"line":28,"column":49,"offset":917}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"{ mobile: true, desktop: true }","position":{"start":{"line":28,"column":49,"offset":917},"end":{"line":28,"column":82,"offset":950}}}],"position":{"start":{"line":28,"column":49,"offset":917},"end":{"line":28,"column":82,"offset":950}}},{"type":"text","value":", you can activate the pagination on mobile/tablet and on desktop.","position":{"start":{"line":28,"column":82,"offset":950},"end":{"line":28,"column":148,"offset":1016}}}],"position":{"start":{"line":28,"column":1,"offset":869},"end":{"line":28,"column":148,"offset":1016}}},"children":["By providing the optional ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"withPagination"}]," with ",["$","$L5","code-1",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"{ mobile: true, desktop: true }"}],", you can activate the pagination on mobile/tablet and on desktop."]}],"\n",["$","$L20","div-4",{"code":"import { Swiper, useSwiper } from 'welcome-ui/Swiper'\n\nconst Example = () => {\n const swiper = useSwiper({ withPagination: { desktop: true, mobile: true } })\n\n return (\n \n \n \n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Swiper","pathToFile":"/Swiper/docs/examples/pagination.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-5",{"as":"h3","id":"without-navigation","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#without-navigation","textDecoration":{"hover":"underline"},"children":"Without navigation"}]}],"\n",["$","$L21","p-5",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By providing the optional ","position":{"start":{"line":34,"column":1,"offset":1112},"end":{"line":34,"column":27,"offset":1138}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"withNavigation","position":{"start":{"line":34,"column":27,"offset":1138},"end":{"line":34,"column":43,"offset":1154}}}],"position":{"start":{"line":34,"column":27,"offset":1138},"end":{"line":34,"column":43,"offset":1154}}},{"type":"text","value":" with ","position":{"start":{"line":34,"column":43,"offset":1154},"end":{"line":34,"column":49,"offset":1160}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"{ mobile: false, desktop: false }","position":{"start":{"line":34,"column":49,"offset":1160},"end":{"line":34,"column":84,"offset":1195}}}],"position":{"start":{"line":34,"column":49,"offset":1160},"end":{"line":34,"column":84,"offset":1195}}},{"type":"text","value":", you can hide the navigation arrows on mobile/tablet and desktop, you still can scroll between slides.","position":{"start":{"line":34,"column":84,"offset":1195},"end":{"line":34,"column":187,"offset":1298}}}],"position":{"start":{"line":34,"column":1,"offset":1112},"end":{"line":34,"column":187,"offset":1298}}},"children":["By providing the optional ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"withNavigation"}]," with ",["$","$L5","code-1",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"{ mobile: false, desktop: false }"}],", you can hide the navigation arrows on mobile/tablet and desktop, you still can scroll between slides."]}],"\n",["$","$L20","div-5",{"code":"import { Swiper, useSwiper } from 'welcome-ui/Swiper'\n\nconst Example = () => {\n const swiper = useSwiper({ withNavigation: { desktop: false, mobile: false } })\n\n return (\n \n \n \n \n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Swiper","pathToFile":"/Swiper/docs/examples/no-navigation.tsx","withCodeEditor":true}],"\n",["$","$Lf","h3-6",{"as":"h3","id":"with-dark-ui","mb":"lg","mt":"xxl","style":{"scrollMarginTop":170},"variant":"h4","children":["$","$L5",null,{"as":"a","color":"inherit","href":"#with-dark-ui","textDecoration":{"hover":"underline"},"children":"With dark UI"}]}],"\n",["$","$L21","p-6",{"node":{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Use dark (black) colors for the pagination and arrows in case of slides too bright with ","position":{"start":{"line":40,"column":1,"offset":1391},"end":{"line":40,"column":89,"offset":1479}}},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"withDarkUI","position":{"start":{"line":40,"column":89,"offset":1479},"end":{"line":40,"column":101,"offset":1491}}}],"position":{"start":{"line":40,"column":89,"offset":1479},"end":{"line":40,"column":101,"offset":1491}}},{"type":"text","value":" props.","position":{"start":{"line":40,"column":101,"offset":1491},"end":{"line":40,"column":108,"offset":1498}}}],"position":{"start":{"line":40,"column":1,"offset":1391},"end":{"line":40,"column":108,"offset":1498}}},"children":["Use dark (black) colors for the pagination and arrows in case of slides too bright with ",["$","$L5","code-0",{"alignItems":"center","as":"code","backgroundColor":"neutral-30","borderRadius":"md","color":"neutral-90","display":"inline-flex","px":"sm","py":"xxs","text":"sm","whiteSpace":"break-spaces","children":"withDarkUI"}]," props."]}],"\n",["$","$L20","div-6",{"code":"import { Box } from 'welcome-ui/Box'\nimport { Swiper, useSwiper } from 'welcome-ui/Swiper'\n\nconst Example = () => {\n const swiper = useSwiper({\n slidesPerView: { desktop: 4, mobile: 1, tablet: 2 },\n withDarkUI: true,\n withPagination: { desktop: true, mobile: true },\n })\n\n return (\n \n {[...Array(6)].map(item => (\n \n ))}\n \n )\n}\n\nexport default Example\n","isOverview":false,"mt":"$undefined","name":"Swiper","pathToFile":"/Swiper/docs/examples/dark.tsx","withCodeEditor":true}]]}]]}],["$","$L22",null,{"isSubPage":true,"tree":[{"href":"#","id":"definition","title":"Definition"},{"href":"#installation","id":"installation","title":"Installation"},{"href":"#examples","id":"examples","title":"Examples","children":[{"href":"#slides-per-view","id":"slides-per-view","title":"Slides per view"},{"href":"#first-slide-to-show","id":"first-slide-to-show","title":"First slide to show"},{"href":"#centered-slides","id":"centered-slides","title":"Centered slides"},{"href":"#autoplay","id":"autoplay","title":"Autoplay"},{"href":"#with-pagination","id":"with-pagination","title":"With pagination"},{"href":"#without-navigation","id":"without-navigation","title":"Without navigation"},{"href":"#with-dark-ui","id":"with-dark-ui","title":"With dark UI"}]}]}]]