[{"data":1,"prerenderedAt":1774},["ShallowReactive",2],{"navigation":3,"\u002Fcomponents\u002Fcarousel\u002Fdeveloper":439},[4,30,256,281,366,375,402,424],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"\u002Fgetting-started","1.getting-started",[10,15,20,25],{"title":11,"path":12,"stem":13,"icon":14},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":16,"path":17,"stem":18,"icon":19},"Nuxt","\u002Fgetting-started\u002Fnuxt","1.getting-started\u002F3.nuxt","i-lucide-mountain",{"title":21,"path":22,"stem":23,"icon":24},"Theming","\u002Fgetting-started\u002Ftheming","1.getting-started\u002F4.theming","i-lucide-palette",{"title":26,"path":27,"stem":28,"icon":29},"MCP","\u002Fgetting-started\u002Fmcp","1.getting-started\u002F5.mcp","i-lucide-plug",{"title":31,"icon":6,"path":32,"stem":33,"children":34,"page":6},"Components","\u002Fcomponents","2.components",[35,43,51,59,67,75,83,92,100,104,108,116,124,133,141,149,157,166,174,182,191,199,203,211,220,228,236,240,248],{"title":36,"path":37,"stem":38,"children":39,"page":6},"Accordion","\u002Fcomponents\u002Faccordion","2.components\u002F01.accordion",[40],{"title":36,"path":41,"stem":42},"\u002Fcomponents\u002Faccordion\u002Foverview","2.components\u002F01.accordion\u002F1.overview",{"title":44,"path":45,"stem":46,"children":47,"page":6},"Alert","\u002Fcomponents\u002Falert","2.components\u002F02.alert",[48],{"title":44,"path":49,"stem":50},"\u002Fcomponents\u002Falert\u002Foverview","2.components\u002F02.alert\u002F1.overview",{"title":52,"path":53,"stem":54,"children":55,"page":6},"Button","\u002Fcomponents\u002Fbutton","2.components\u002F03.button",[56],{"title":52,"path":57,"stem":58},"\u002Fcomponents\u002Fbutton\u002Foverview","2.components\u002F03.button\u002F1.overview",{"title":60,"path":61,"stem":62,"children":63,"page":6},"Card","\u002Fcomponents\u002Fcard","2.components\u002F04.card",[64],{"title":60,"path":65,"stem":66},"\u002Fcomponents\u002Fcard\u002Foverview","2.components\u002F04.card\u002F1.overview",{"title":68,"path":69,"stem":70,"children":71,"page":6},"Carousel","\u002Fcomponents\u002Fcarousel","2.components\u002F05.carousel",[72],{"title":68,"path":73,"stem":74},"\u002Fcomponents\u002Fcarousel\u002Foverview","2.components\u002F05.carousel\u002F1.overview",{"title":76,"path":77,"stem":78,"children":79,"page":6},"Checkbox","\u002Fcomponents\u002Fcheckbox","2.components\u002F06.checkbox",[80],{"title":76,"path":81,"stem":82},"\u002Fcomponents\u002Fcheckbox\u002Foverview","2.components\u002F06.checkbox\u002F1.overview",{"title":84,"path":85,"stem":86,"children":87,"page":6},"Date Picker","\u002Fcomponents\u002Fdate-picker","2.components\u002F07.date-picker",[88],{"title":89,"path":90,"stem":91},"Date picker","\u002Fcomponents\u002Fdate-picker\u002Foverview","2.components\u002F07.date-picker\u002F1.overview",{"title":93,"path":94,"stem":95,"children":96,"page":6},"Dropdown","\u002Fcomponents\u002Fdropdown","2.components\u002F08.dropdown",[97],{"title":93,"path":98,"stem":99},"\u002Fcomponents\u002Fdropdown\u002Foverview","2.components\u002F08.dropdown\u002F1.overview",{"title":101,"path":102,"stem":103},"Heading","\u002Fcomponents\u002Fheading","2.components\u002F09.heading",{"title":105,"path":106,"stem":107},"Icon","\u002Fcomponents\u002Ficon","2.components\u002F10.icon",{"title":109,"path":110,"stem":111,"children":112,"page":6},"Input","\u002Fcomponents\u002Finput","2.components\u002F11.input",[113],{"title":109,"path":114,"stem":115},"\u002Fcomponents\u002Finput\u002Foverview","2.components\u002F11.input\u002F1.overview",{"title":117,"path":118,"stem":119,"children":120,"page":6},"Label","\u002Fcomponents\u002Flabel","2.components\u002F12.label",[121],{"title":117,"path":122,"stem":123},"\u002Fcomponents\u002Flabel\u002Foverview","2.components\u002F12.label\u002F1.overview",{"title":125,"path":126,"stem":127,"children":128,"page":6},"Phone Number","\u002Fcomponents\u002Fphone-number","2.components\u002F13.phone-number",[129],{"title":130,"path":131,"stem":132},"Phone number","\u002Fcomponents\u002Fphone-number\u002Foverview","2.components\u002F13.phone-number\u002F1.overview",{"title":134,"path":135,"stem":136,"children":137,"page":6},"Popover","\u002Fcomponents\u002Fpopover","2.components\u002F14.popover",[138],{"title":134,"path":139,"stem":140},"\u002Fcomponents\u002Fpopover\u002Foverview","2.components\u002F14.popover\u002F1.overview",{"title":142,"path":143,"stem":144,"children":145,"page":6},"Quantity","\u002Fcomponents\u002Fquantity","2.components\u002F15.quantity",[146],{"title":142,"path":147,"stem":148},"\u002Fcomponents\u002Fquantity\u002Foverview","2.components\u002F15.quantity\u002F1.overview",{"title":150,"path":151,"stem":152,"children":153,"page":6},"Radio","\u002Fcomponents\u002Fradio","2.components\u002F16.radio",[154],{"title":150,"path":155,"stem":156},"\u002Fcomponents\u002Fradio\u002Foverview","2.components\u002F16.radio\u002F1.overview",{"title":158,"path":159,"stem":160,"children":161,"page":6},"Radio Group","\u002Fcomponents\u002Fradio-group","2.components\u002F17.radio-group",[162],{"title":163,"path":164,"stem":165},"Radio group","\u002Fcomponents\u002Fradio-group\u002Foverview","2.components\u002F17.radio-group\u002F1.overview",{"title":167,"path":168,"stem":169,"children":170,"page":6},"Rating","\u002Fcomponents\u002Frating","2.components\u002F18.rating",[171],{"title":167,"path":172,"stem":173},"\u002Fcomponents\u002Frating\u002Foverview","2.components\u002F18.rating\u002F1.overview",{"title":175,"path":176,"stem":177,"children":178,"page":6},"Required","\u002Fcomponents\u002Frequired","2.components\u002F19.required",[179],{"title":175,"path":180,"stem":181},"\u002Fcomponents\u002Frequired\u002Foverview","2.components\u002F19.required\u002F1.overview",{"title":183,"path":184,"stem":185,"children":186,"page":6},"Scroll Area","\u002Fcomponents\u002Fscroll-area","2.components\u002F20.scroll-area",[187],{"title":188,"path":189,"stem":190},"Scroll area","\u002Fcomponents\u002Fscroll-area\u002Foverview","2.components\u002F20.scroll-area\u002F1.overview",{"title":192,"path":193,"stem":194,"children":195,"page":6},"Select","\u002Fcomponents\u002Fselect","2.components\u002F21.select",[196],{"title":192,"path":197,"stem":198},"\u002Fcomponents\u002Fselect\u002Foverview","2.components\u002F21.select\u002F1.overview",{"title":200,"path":201,"stem":202},"Spinner","\u002Fcomponents\u002Fspinner","2.components\u002F22.spinner",{"title":204,"path":205,"stem":206,"children":207,"page":6},"Switch","\u002Fcomponents\u002Fswitch","2.components\u002F23.switch",[208],{"title":204,"path":209,"stem":210},"\u002Fcomponents\u002Fswitch\u002Foverview","2.components\u002F23.switch\u002F1.overview",{"title":212,"path":213,"stem":214,"children":215,"page":6},"Tab Badge","\u002Fcomponents\u002Ftab-badge","2.components\u002F24.tab-badge",[216],{"title":217,"path":218,"stem":219},"Tab badge","\u002Fcomponents\u002Ftab-badge\u002Foverview","2.components\u002F24.tab-badge\u002F1.overview",{"title":221,"path":222,"stem":223,"children":224,"page":6},"Tabs","\u002Fcomponents\u002Ftabs","2.components\u002F25.tabs",[225],{"title":221,"path":226,"stem":227},"\u002Fcomponents\u002Ftabs\u002Foverview","2.components\u002F25.tabs\u002F1.overview",{"title":229,"path":230,"stem":231,"children":232,"page":6},"Tag","\u002Fcomponents\u002Ftag","2.components\u002F26.tag",[233],{"title":229,"path":234,"stem":235},"\u002Fcomponents\u002Ftag\u002Foverview","2.components\u002F26.tag\u002F1.overview",{"title":237,"path":238,"stem":239},"Text","\u002Fcomponents\u002Ftext","2.components\u002F27.text",{"title":241,"path":242,"stem":243,"children":244,"page":6},"Textarea","\u002Fcomponents\u002Ftextarea","2.components\u002F28.textarea",[245],{"title":241,"path":246,"stem":247},"\u002Fcomponents\u002Ftextarea\u002Foverview","2.components\u002F28.textarea\u002F1.overview",{"title":249,"path":250,"stem":251,"children":252,"page":6},"Tooltip","\u002Fcomponents\u002Ftooltip","2.components\u002F29.tooltip",[253],{"title":249,"path":254,"stem":255},"\u002Fcomponents\u002Ftooltip\u002Foverview","2.components\u002F29.tooltip\u002F1.overview",{"title":257,"icon":6,"path":258,"stem":259,"children":260,"page":6},"Foundations","\u002Ffoundations","2.foundations",[261,269,273,277],{"title":262,"icon":6,"path":263,"stem":264,"children":265,"page":6},"Color","\u002Ffoundations\u002Fcolor","2.foundations\u002F1.color",[266],{"title":262,"path":267,"stem":268},"\u002Ffoundations\u002Fcolor\u002Foverview","2.foundations\u002F1.color\u002F1.overview",{"title":270,"path":271,"stem":272},"Icons","\u002Ffoundations\u002Ficons","2.foundations\u002F2.icons",{"title":274,"path":275,"stem":276},"Logos and Pins","\u002Ffoundations\u002Flogos-and-pins","2.foundations\u002F3.logos-and-pins",{"title":278,"path":279,"stem":280},"Web layers","\u002Ffoundations\u002Fweb-layers","2.foundations\u002F4.web-layers",{"title":282,"icon":6,"path":283,"stem":284,"children":285,"page":6},"WIP","\u002Fwip","3.wip",[286,290,294,298,302,306,310,314,318,322,326,330,334,338,342,346,350,354,358,362],{"title":287,"path":288,"stem":289},"Additional","\u002Fwip\u002Fadditional","3.wip\u002Fadditional",{"title":291,"path":292,"stem":293},"Alt text","\u002Fwip\u002Falt-text","3.wip\u002Falt-text",{"title":295,"path":296,"stem":297},"AnnouncementBar","\u002Fwip\u002Fannouncement-bar","3.wip\u002Fannouncement-bar",{"title":299,"path":300,"stem":301},"Avatar","\u002Fwip\u002Favatar","3.wip\u002Favatar",{"title":303,"path":304,"stem":305},"Banner","\u002Fwip\u002Fbanner","3.wip\u002Fbanner",{"title":307,"path":308,"stem":309},"Breadcrumbs","\u002Fwip\u002Fbreadcrumbs","3.wip\u002Fbreadcrumbs",{"title":311,"path":312,"stem":313},"Divider & scroll","\u002Fwip\u002Fdivider-scroll","3.wip\u002Fdivider-scroll",{"title":315,"path":316,"stem":317},"FieldMessage","\u002Fwip\u002Ffield-message","3.wip\u002Ffield-message",{"title":319,"path":320,"stem":321},"Focus Ring","\u002Fwip\u002Ffocus-ring","3.wip\u002Ffocus-ring",{"title":323,"path":324,"stem":325},"InlineSeparator","\u002Fwip\u002Finline-separator","3.wip\u002Finline-separator",{"title":327,"path":328,"stem":329},"Modal & drawer","\u002Fwip\u002Fmodal-drawer","3.wip\u002Fmodal-drawer",{"title":331,"path":332,"stem":333},"Optional","\u002Fwip\u002Foptional","3.wip\u002Foptional",{"title":335,"path":336,"stem":337},"Pagination","\u002Fwip\u002Fpagination","3.wip\u002Fpagination",{"title":339,"path":340,"stem":341},"PasswordInput","\u002Fwip\u002Fpassword-input","3.wip\u002Fpassword-input",{"title":343,"path":344,"stem":345},"Pinned bar page","\u002Fwip\u002Fpinned-bar-page","3.wip\u002Fpinned-bar-page",{"title":347,"path":348,"stem":349},"PromotionalBar","\u002Fwip\u002Fpromotional-bar","3.wip\u002Fpromotional-bar",{"title":351,"path":352,"stem":353},"SearchInput","\u002Fwip\u002Fsearch-input","3.wip\u002Fsearch-input",{"title":355,"path":356,"stem":357},"StatusLine","\u002Fwip\u002Fstatus-line","3.wip\u002Fstatus-line",{"title":359,"path":360,"stem":361},"Stepper & loaderBar","\u002Fwip\u002Fstepper-loader-bar","3.wip\u002Fstepper-loader-bar",{"title":363,"path":364,"stem":365},"TextInput","\u002Fwip\u002Ftext-input","3.wip\u002Ftext-input",{"title":367,"icon":6,"path":368,"stem":369,"children":370,"page":6},"Overview","\u002Foverview","4.overview",[371],{"title":372,"path":373,"stem":374},"For developers","\u002Foverview\u002Ffor-developers","4.overview\u002F1.for-developers",{"title":376,"icon":6,"path":377,"stem":378,"children":379,"page":6},"Brand","\u002Fbrand","5.brand",[380,389],{"title":381,"icon":6,"path":382,"stem":383,"children":384,"page":6},"Brand guidelines","\u002Fbrand\u002Fbrand-guidelines","5.brand\u002F1.brand-guidelines",[385],{"title":386,"path":387,"stem":388},"Dr. Max Trademarks Guidelines","\u002Fbrand\u002Fbrand-guidelines\u002Fdr-max-trademarks-guidelines","5.brand\u002F1.brand-guidelines\u002F2.dr-max-trademarks-guidelines",{"title":390,"icon":6,"path":391,"stem":392,"children":393,"page":6},"Assets","\u002Fbrand\u002Fassets","5.brand\u002F2.assets",[394,398],{"title":395,"path":396,"stem":397},"Logos","\u002Fbrand\u002Fassets\u002Flogos","5.brand\u002F2.assets\u002F2.logos",{"title":399,"path":400,"stem":401},"Dr. Max Tagline","\u002Fbrand\u002Fassets\u002Fdr-max-tagline","5.brand\u002F2.assets\u002F3.dr-max-tagline",{"title":403,"icon":6,"path":404,"stem":405,"children":406,"page":6},"Content","\u002Fcontent","6.content",[407,411],{"title":408,"path":409,"stem":410},"Content accessibility","\u002Fcontent\u002Fcontent-accessibility","6.content\u002F1.content-accessibility",{"title":412,"icon":6,"path":413,"stem":414,"children":415,"page":6},"Content guidance","\u002Fcontent\u002Fcontent-guidelines","6.content\u002F2.content-guidelines",[416,420],{"title":417,"path":418,"stem":419},"Category color-coding","\u002Fcontent\u002Fcontent-guidelines\u002Fcategory-color-coding","6.content\u002F2.content-guidelines\u002F2.category-color-coding",{"title":421,"path":422,"stem":423},"Pop-up banners","\u002Fcontent\u002Fcontent-guidelines\u002Fpop-up-banners","6.content\u002F2.content-guidelines\u002F3.pop-up-banners",{"title":425,"icon":6,"path":426,"stem":427,"children":428,"page":6},"Accessibility","\u002Faccessibility","7.accessibility",[429],{"title":430,"path":431,"stem":432,"children":433,"icon":6},"Accessibility guidance","\u002Faccessibility\u002Faccessibility-guidance","7.accessibility\u002F1.accessibility-guidance\u002F1.index",[434,435],{"title":425,"path":431,"stem":432},{"title":436,"path":437,"stem":438},"Understanding WCAG 2.2","\u002Faccessibility\u002Faccessibility-guidance\u002Funderstanding-wcag-2-2","7.accessibility\u002F1.accessibility-guidance\u002F2.understanding-wcag-2-2",{"id":440,"title":68,"body":441,"description":1766,"extension":1767,"links":1768,"meta":1769,"navigation":6,"path":1770,"seo":1771,"stem":1772,"__hash__":1773},"docs\u002F2.components\u002F05.carousel\u002F3.developer.md",{"type":442,"value":443,"toc":1757},"minimark",[444,449,502,514,518,533,837,842,888,1322,1326,1332,1430,1434,1444,1541,1545,1558,1736,1747,1753],[445,446,448],"h2",{"id":447},"import","Import",[450,451,456],"pre",{"className":452,"code":453,"language":454,"meta":455,"style":455},"language-ts shiki shiki-themes material-theme-palenight","import { Carousel, CarouselDots, CarouselNavigation } from \"@dr-max\u002Fui\u002Fcarousel\"\n","ts","",[457,458,459],"code",{"__ignoreMap":455},[460,461,464,467,471,475,478,481,483,486,489,492,495,499],"span",{"class":462,"line":463},"line",1,[460,465,447],{"class":466},"s6cf3",[460,468,470],{"class":469},"sAklC"," {",[460,472,474],{"class":473},"s0W1g"," Carousel",[460,476,477],{"class":469},",",[460,479,480],{"class":473}," CarouselDots",[460,482,477],{"class":469},[460,484,485],{"class":473}," CarouselNavigation",[460,487,488],{"class":469}," }",[460,490,491],{"class":466}," from",[460,493,494],{"class":469}," \"",[460,496,498],{"class":497},"sfyAc","@dr-max\u002Fui\u002Fcarousel",[460,500,501],{"class":469},"\"\n",[503,504,505,506,513],"p",{},"The entry carries its own precompiled CSS (including the styles of the Button, Icon, Spinner and Text parts it composes) — no extra style imports needed. The track itself is powered by ",[507,508,512],"a",{"href":509,"rel":510},"https:\u002F\u002Fkeen-slider.io\u002F",[511],"nofollow","keen-slider",".",[445,515,517],{"id":516},"usage","Usage",[503,519,520,521,524,525,528,529,532],{},"Pass the data through the ",[457,522,523],{},"slides"," array — the default slot is a scoped slot that receives each entry as ",[457,526,527],{},"slide",", so the carousel stays agnostic about what a slide looks like. ",[457,530,531],{},"slides-per-page"," sets how many slides form one page:",[450,534,538],{"className":535,"code":536,"language":537,"meta":455,"style":455},"language-vue shiki shiki-themes material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { Carousel } from \"@dr-max\u002Fui\u002Fcarousel\"\n\nconst slides = [\"One\", \"Two\", \"Three\", \"Four\", \"Five\", \"Six\"]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CCarousel :slides=\"slides\" :slides-per-page=\"3\" slide-class=\"px-1\">\n    \u003Ctemplate #default=\"{ slide }\">\n      \u003Cdiv class=\"flex h-32 items-center justify-center rounded-lg bg-blue-50\">\n        {{ slide }}\n      \u003C\u002Fdiv>\n    \u003C\u002Ftemplate>\n  \u003C\u002FCarousel>\n\u003C\u002Ftemplate>\n","vue",[457,539,540,569,588,595,664,674,679,689,738,769,792,798,808,818,828],{"__ignoreMap":455},[460,541,542,545,549,553,556,559,562,564,566],{"class":462,"line":463},[460,543,544],{"class":469},"\u003C",[460,546,548],{"class":547},"s-wAU","script",[460,550,552],{"class":551},"sJ14y"," setup",[460,554,555],{"class":551}," lang",[460,557,558],{"class":469},"=",[460,560,561],{"class":469},"\"",[460,563,454],{"class":497},[460,565,561],{"class":469},[460,567,568],{"class":469},">\n",[460,570,572,574,576,578,580,582,584,586],{"class":462,"line":571},2,[460,573,447],{"class":466},[460,575,470],{"class":469},[460,577,474],{"class":473},[460,579,488],{"class":469},[460,581,491],{"class":466},[460,583,494],{"class":469},[460,585,498],{"class":497},[460,587,501],{"class":469},[460,589,591],{"class":462,"line":590},3,[460,592,594],{"emptyLinePlaceholder":593},true,"\n",[460,596,598,601,604,606,609,611,614,616,618,620,623,625,627,629,632,634,636,638,641,643,645,647,650,652,654,656,659,661],{"class":462,"line":597},4,[460,599,600],{"class":551},"const",[460,602,603],{"class":473}," slides ",[460,605,558],{"class":469},[460,607,608],{"class":473}," [",[460,610,561],{"class":469},[460,612,613],{"class":497},"One",[460,615,561],{"class":469},[460,617,477],{"class":469},[460,619,494],{"class":469},[460,621,622],{"class":497},"Two",[460,624,561],{"class":469},[460,626,477],{"class":469},[460,628,494],{"class":469},[460,630,631],{"class":497},"Three",[460,633,561],{"class":469},[460,635,477],{"class":469},[460,637,494],{"class":469},[460,639,640],{"class":497},"Four",[460,642,561],{"class":469},[460,644,477],{"class":469},[460,646,494],{"class":469},[460,648,649],{"class":497},"Five",[460,651,561],{"class":469},[460,653,477],{"class":469},[460,655,494],{"class":469},[460,657,658],{"class":497},"Six",[460,660,561],{"class":469},[460,662,663],{"class":473},"]\n",[460,665,667,670,672],{"class":462,"line":666},5,[460,668,669],{"class":469},"\u003C\u002F",[460,671,548],{"class":547},[460,673,568],{"class":469},[460,675,677],{"class":462,"line":676},6,[460,678,594],{"emptyLinePlaceholder":593},[460,680,682,684,687],{"class":462,"line":681},7,[460,683,544],{"class":469},[460,685,686],{"class":547},"template",[460,688,568],{"class":469},[460,690,692,695,697,700,702,704,706,708,710,712,714,716,718,722,724,727,729,731,734,736],{"class":462,"line":691},8,[460,693,694],{"class":469},"  \u003C",[460,696,68],{"class":547},[460,698,699],{"class":469}," :",[460,701,523],{"class":551},[460,703,558],{"class":469},[460,705,561],{"class":469},[460,707,523],{"class":473},[460,709,561],{"class":469},[460,711,699],{"class":469},[460,713,531],{"class":551},[460,715,558],{"class":469},[460,717,561],{"class":469},[460,719,721],{"class":720},"sx098","3",[460,723,561],{"class":469},[460,725,726],{"class":551}," slide-class",[460,728,558],{"class":469},[460,730,561],{"class":469},[460,732,733],{"class":497},"px-1",[460,735,561],{"class":469},[460,737,568],{"class":469},[460,739,741,744,746,749,752,754,756,759,762,765,767],{"class":462,"line":740},9,[460,742,743],{"class":469},"    \u003C",[460,745,686],{"class":547},[460,747,748],{"class":469}," #",[460,750,751],{"class":551},"default",[460,753,558],{"class":469},[460,755,561],{"class":469},[460,757,758],{"class":469},"{",[460,760,761],{"class":473}," slide ",[460,763,764],{"class":469},"}",[460,766,561],{"class":469},[460,768,568],{"class":469},[460,770,772,775,778,781,783,785,788,790],{"class":462,"line":771},10,[460,773,774],{"class":469},"      \u003C",[460,776,777],{"class":547},"div",[460,779,780],{"class":551}," class",[460,782,558],{"class":469},[460,784,561],{"class":469},[460,786,787],{"class":497},"flex h-32 items-center justify-center rounded-lg bg-blue-50",[460,789,561],{"class":469},[460,791,568],{"class":469},[460,793,795],{"class":462,"line":794},11,[460,796,797],{"class":473},"        {{ slide }}\n",[460,799,801,804,806],{"class":462,"line":800},12,[460,802,803],{"class":469},"      \u003C\u002F",[460,805,777],{"class":547},[460,807,568],{"class":469},[460,809,811,814,816],{"class":462,"line":810},13,[460,812,813],{"class":469},"    \u003C\u002F",[460,815,686],{"class":547},[460,817,568],{"class":469},[460,819,821,824,826],{"class":462,"line":820},14,[460,822,823],{"class":469},"  \u003C\u002F",[460,825,68],{"class":547},[460,827,568],{"class":469},[460,829,831,833,835],{"class":462,"line":830},15,[460,832,669],{"class":469},[460,834,686],{"class":547},[460,836,568],{"class":469},[838,839,841],"h3",{"id":840},"controls","Controls",[503,843,844,845,848,849,852,853,852,856,852,859,852,862,865,866,869,870,873,874,877,878,852,881,852,883,869,885,887],{},"The ",[457,846,847],{},"#controls"," scoped slot receives the paging state and callbacks (",[457,850,851],{},"currentPage",", ",[457,854,855],{},"pageCount",[457,857,858],{},"showPage",[457,860,861],{},"showPrevPage",[457,863,864],{},"showNextPage",", …) — wire them to ",[457,867,868],{},"CarouselDots"," and ",[457,871,872],{},"CarouselNavigation",". A separate ",[457,875,876],{},"#pagination"," slot receives ",[457,879,880],{},"pageIds",[457,882,851],{},[457,884,855],{},[457,886,858],{}," for fully custom pagination:",[450,889,891],{"className":535,"code":890,"language":537,"meta":455,"style":455},"\u003Cscript setup lang=\"ts\">\nimport { Carousel, CarouselDots, CarouselNavigation } from \"@dr-max\u002Fui\u002Fcarousel\"\n\nconst slides = [\"One\", \"Two\", \"Three\", \"Four\", \"Five\", \"Six\"]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CCarousel :slides=\"slides\" :slides-per-page=\"3\" slide-class=\"px-1\">\n    \u003Ctemplate #default=\"{ slide }\">\n      \u003Cdiv class=\"flex h-32 items-center justify-center rounded-lg bg-blue-50\">\n        {{ slide }}\n      \u003C\u002Fdiv>\n    \u003C\u002Ftemplate>\n    \u003Ctemplate #controls=\"{ showPrevPage, showNextPage, showPage, pageCount, currentPage }\">\n      \u003Cdiv class=\"relative mt-2 flex min-h-12 items-center\">\n        \u003CCarouselDots :current-page=\"currentPage\" :page-count=\"pageCount\" @show-page=\"showPage\" \u002F>\n        \u003CCarouselNavigation class=\"right-1\" @click-prev=\"showPrevPage\" @click-next=\"showNextPage\" \u002F>\n      \u003C\u002Fdiv>\n    \u003C\u002Ftemplate>\n  \u003C\u002FCarousel>\n\u003C\u002Ftemplate>\n",[457,892,893,913,939,943,1001,1009,1013,1021,1063,1087,1105,1109,1117,1125,1170,1189,1240,1286,1295,1304,1313],{"__ignoreMap":455},[460,894,895,897,899,901,903,905,907,909,911],{"class":462,"line":463},[460,896,544],{"class":469},[460,898,548],{"class":547},[460,900,552],{"class":551},[460,902,555],{"class":551},[460,904,558],{"class":469},[460,906,561],{"class":469},[460,908,454],{"class":497},[460,910,561],{"class":469},[460,912,568],{"class":469},[460,914,915,917,919,921,923,925,927,929,931,933,935,937],{"class":462,"line":571},[460,916,447],{"class":466},[460,918,470],{"class":469},[460,920,474],{"class":473},[460,922,477],{"class":469},[460,924,480],{"class":473},[460,926,477],{"class":469},[460,928,485],{"class":473},[460,930,488],{"class":469},[460,932,491],{"class":466},[460,934,494],{"class":469},[460,936,498],{"class":497},[460,938,501],{"class":469},[460,940,941],{"class":462,"line":590},[460,942,594],{"emptyLinePlaceholder":593},[460,944,945,947,949,951,953,955,957,959,961,963,965,967,969,971,973,975,977,979,981,983,985,987,989,991,993,995,997,999],{"class":462,"line":597},[460,946,600],{"class":551},[460,948,603],{"class":473},[460,950,558],{"class":469},[460,952,608],{"class":473},[460,954,561],{"class":469},[460,956,613],{"class":497},[460,958,561],{"class":469},[460,960,477],{"class":469},[460,962,494],{"class":469},[460,964,622],{"class":497},[460,966,561],{"class":469},[460,968,477],{"class":469},[460,970,494],{"class":469},[460,972,631],{"class":497},[460,974,561],{"class":469},[460,976,477],{"class":469},[460,978,494],{"class":469},[460,980,640],{"class":497},[460,982,561],{"class":469},[460,984,477],{"class":469},[460,986,494],{"class":469},[460,988,649],{"class":497},[460,990,561],{"class":469},[460,992,477],{"class":469},[460,994,494],{"class":469},[460,996,658],{"class":497},[460,998,561],{"class":469},[460,1000,663],{"class":473},[460,1002,1003,1005,1007],{"class":462,"line":666},[460,1004,669],{"class":469},[460,1006,548],{"class":547},[460,1008,568],{"class":469},[460,1010,1011],{"class":462,"line":676},[460,1012,594],{"emptyLinePlaceholder":593},[460,1014,1015,1017,1019],{"class":462,"line":681},[460,1016,544],{"class":469},[460,1018,686],{"class":547},[460,1020,568],{"class":469},[460,1022,1023,1025,1027,1029,1031,1033,1035,1037,1039,1041,1043,1045,1047,1049,1051,1053,1055,1057,1059,1061],{"class":462,"line":691},[460,1024,694],{"class":469},[460,1026,68],{"class":547},[460,1028,699],{"class":469},[460,1030,523],{"class":551},[460,1032,558],{"class":469},[460,1034,561],{"class":469},[460,1036,523],{"class":473},[460,1038,561],{"class":469},[460,1040,699],{"class":469},[460,1042,531],{"class":551},[460,1044,558],{"class":469},[460,1046,561],{"class":469},[460,1048,721],{"class":720},[460,1050,561],{"class":469},[460,1052,726],{"class":551},[460,1054,558],{"class":469},[460,1056,561],{"class":469},[460,1058,733],{"class":497},[460,1060,561],{"class":469},[460,1062,568],{"class":469},[460,1064,1065,1067,1069,1071,1073,1075,1077,1079,1081,1083,1085],{"class":462,"line":740},[460,1066,743],{"class":469},[460,1068,686],{"class":547},[460,1070,748],{"class":469},[460,1072,751],{"class":551},[460,1074,558],{"class":469},[460,1076,561],{"class":469},[460,1078,758],{"class":469},[460,1080,761],{"class":473},[460,1082,764],{"class":469},[460,1084,561],{"class":469},[460,1086,568],{"class":469},[460,1088,1089,1091,1093,1095,1097,1099,1101,1103],{"class":462,"line":771},[460,1090,774],{"class":469},[460,1092,777],{"class":547},[460,1094,780],{"class":551},[460,1096,558],{"class":469},[460,1098,561],{"class":469},[460,1100,787],{"class":497},[460,1102,561],{"class":469},[460,1104,568],{"class":469},[460,1106,1107],{"class":462,"line":794},[460,1108,797],{"class":473},[460,1110,1111,1113,1115],{"class":462,"line":800},[460,1112,803],{"class":469},[460,1114,777],{"class":547},[460,1116,568],{"class":469},[460,1118,1119,1121,1123],{"class":462,"line":810},[460,1120,813],{"class":469},[460,1122,686],{"class":547},[460,1124,568],{"class":469},[460,1126,1127,1129,1131,1133,1135,1137,1139,1141,1144,1146,1149,1151,1154,1156,1159,1161,1164,1166,1168],{"class":462,"line":820},[460,1128,743],{"class":469},[460,1130,686],{"class":547},[460,1132,748],{"class":469},[460,1134,840],{"class":551},[460,1136,558],{"class":469},[460,1138,561],{"class":469},[460,1140,758],{"class":469},[460,1142,1143],{"class":473}," showPrevPage",[460,1145,477],{"class":469},[460,1147,1148],{"class":473}," showNextPage",[460,1150,477],{"class":469},[460,1152,1153],{"class":473}," showPage",[460,1155,477],{"class":469},[460,1157,1158],{"class":473}," pageCount",[460,1160,477],{"class":469},[460,1162,1163],{"class":473}," currentPage ",[460,1165,764],{"class":469},[460,1167,561],{"class":469},[460,1169,568],{"class":469},[460,1171,1172,1174,1176,1178,1180,1182,1185,1187],{"class":462,"line":830},[460,1173,774],{"class":469},[460,1175,777],{"class":547},[460,1177,780],{"class":551},[460,1179,558],{"class":469},[460,1181,561],{"class":469},[460,1183,1184],{"class":497},"relative mt-2 flex min-h-12 items-center",[460,1186,561],{"class":469},[460,1188,568],{"class":469},[460,1190,1192,1195,1197,1199,1202,1204,1206,1208,1210,1212,1215,1217,1219,1221,1223,1226,1229,1231,1233,1235,1237],{"class":462,"line":1191},16,[460,1193,1194],{"class":469},"        \u003C",[460,1196,868],{"class":547},[460,1198,699],{"class":469},[460,1200,1201],{"class":551},"current-page",[460,1203,558],{"class":469},[460,1205,561],{"class":469},[460,1207,851],{"class":473},[460,1209,561],{"class":469},[460,1211,699],{"class":469},[460,1213,1214],{"class":551},"page-count",[460,1216,558],{"class":469},[460,1218,561],{"class":469},[460,1220,855],{"class":473},[460,1222,561],{"class":469},[460,1224,1225],{"class":469}," @",[460,1227,1228],{"class":551},"show-page",[460,1230,558],{"class":469},[460,1232,561],{"class":469},[460,1234,858],{"class":473},[460,1236,561],{"class":469},[460,1238,1239],{"class":469}," \u002F>\n",[460,1241,1243,1245,1247,1249,1251,1253,1256,1258,1260,1263,1265,1267,1269,1271,1273,1276,1278,1280,1282,1284],{"class":462,"line":1242},17,[460,1244,1194],{"class":469},[460,1246,872],{"class":547},[460,1248,780],{"class":551},[460,1250,558],{"class":469},[460,1252,561],{"class":469},[460,1254,1255],{"class":497},"right-1",[460,1257,561],{"class":469},[460,1259,1225],{"class":469},[460,1261,1262],{"class":551},"click-prev",[460,1264,558],{"class":469},[460,1266,561],{"class":469},[460,1268,861],{"class":473},[460,1270,561],{"class":469},[460,1272,1225],{"class":469},[460,1274,1275],{"class":551},"click-next",[460,1277,558],{"class":469},[460,1279,561],{"class":469},[460,1281,864],{"class":473},[460,1283,561],{"class":469},[460,1285,1239],{"class":469},[460,1287,1289,1291,1293],{"class":462,"line":1288},18,[460,1290,803],{"class":469},[460,1292,777],{"class":547},[460,1294,568],{"class":469},[460,1296,1298,1300,1302],{"class":462,"line":1297},19,[460,1299,813],{"class":469},[460,1301,686],{"class":547},[460,1303,568],{"class":469},[460,1305,1307,1309,1311],{"class":462,"line":1306},20,[460,1308,823],{"class":469},[460,1310,68],{"class":547},[460,1312,568],{"class":469},[460,1314,1316,1318,1320],{"class":462,"line":1315},21,[460,1317,669],{"class":469},[460,1319,686],{"class":547},[460,1321,568],{"class":469},[838,1323,1325],{"id":1324},"scrollbar","Scrollbar",[503,1327,1328,1331],{},[457,1329,1330],{},"force-scrollbar"," renders a progress scrollbar below the track — useful when dots would be too many:",[450,1333,1335],{"className":535,"code":1334,"language":537,"meta":455,"style":455},"\u003Ctemplate>\n  \u003CCarousel :slides=\"slides\" :slides-per-page=\"3\" force-scrollbar>\n    \u003Ctemplate #default=\"{ slide }\">…\u003C\u002Ftemplate>\n  \u003C\u002FCarousel>\n\u003C\u002Ftemplate>\n",[457,1336,1337,1345,1380,1414,1422],{"__ignoreMap":455},[460,1338,1339,1341,1343],{"class":462,"line":463},[460,1340,544],{"class":469},[460,1342,686],{"class":547},[460,1344,568],{"class":469},[460,1346,1347,1349,1351,1353,1355,1357,1359,1361,1363,1365,1367,1369,1371,1373,1375,1378],{"class":462,"line":571},[460,1348,694],{"class":469},[460,1350,68],{"class":547},[460,1352,699],{"class":469},[460,1354,523],{"class":551},[460,1356,558],{"class":469},[460,1358,561],{"class":469},[460,1360,523],{"class":473},[460,1362,561],{"class":469},[460,1364,699],{"class":469},[460,1366,531],{"class":551},[460,1368,558],{"class":469},[460,1370,561],{"class":469},[460,1372,721],{"class":720},[460,1374,561],{"class":469},[460,1376,1377],{"class":551}," force-scrollbar",[460,1379,568],{"class":469},[460,1381,1382,1384,1386,1388,1390,1392,1394,1396,1398,1400,1402,1405,1408,1410,1412],{"class":462,"line":590},[460,1383,743],{"class":469},[460,1385,686],{"class":547},[460,1387,748],{"class":469},[460,1389,751],{"class":551},[460,1391,558],{"class":469},[460,1393,561],{"class":469},[460,1395,758],{"class":469},[460,1397,761],{"class":473},[460,1399,764],{"class":469},[460,1401,561],{"class":469},[460,1403,1404],{"class":469},">",[460,1406,1407],{"class":473},"…",[460,1409,669],{"class":469},[460,1411,686],{"class":547},[460,1413,568],{"class":469},[460,1415,1416,1418,1420],{"class":462,"line":597},[460,1417,823],{"class":469},[460,1419,68],{"class":547},[460,1421,568],{"class":469},[460,1423,1424,1426,1428],{"class":462,"line":666},[460,1425,669],{"class":469},[460,1427,686],{"class":547},[460,1429,568],{"class":469},[838,1431,1433],{"id":1432},"autoplay-and-loop","Autoplay and loop",[503,1435,1436,1439,1440,1443],{},[457,1437,1438],{},"autoplay-interval"," advances the carousel automatically (milliseconds, zero disables it — the default), and ",[457,1441,1442],{},"loop"," lets the track continue past the last slide:",[450,1445,1447],{"className":535,"code":1446,"language":537,"meta":455,"style":455},"\u003Ctemplate>\n  \u003CCarousel :slides=\"slides\" :autoplay-interval=\"5000\" loop>\n    \u003Ctemplate #default=\"{ slide }\">…\u003C\u002Ftemplate>\n  \u003C\u002FCarousel>\n\u003C\u002Ftemplate>\n",[457,1448,1449,1457,1493,1525,1533],{"__ignoreMap":455},[460,1450,1451,1453,1455],{"class":462,"line":463},[460,1452,544],{"class":469},[460,1454,686],{"class":547},[460,1456,568],{"class":469},[460,1458,1459,1461,1463,1465,1467,1469,1471,1473,1475,1477,1479,1481,1483,1486,1488,1491],{"class":462,"line":571},[460,1460,694],{"class":469},[460,1462,68],{"class":547},[460,1464,699],{"class":469},[460,1466,523],{"class":551},[460,1468,558],{"class":469},[460,1470,561],{"class":469},[460,1472,523],{"class":473},[460,1474,561],{"class":469},[460,1476,699],{"class":469},[460,1478,1438],{"class":551},[460,1480,558],{"class":469},[460,1482,561],{"class":469},[460,1484,1485],{"class":720},"5000",[460,1487,561],{"class":469},[460,1489,1490],{"class":551}," loop",[460,1492,568],{"class":469},[460,1494,1495,1497,1499,1501,1503,1505,1507,1509,1511,1513,1515,1517,1519,1521,1523],{"class":462,"line":590},[460,1496,743],{"class":469},[460,1498,686],{"class":547},[460,1500,748],{"class":469},[460,1502,751],{"class":551},[460,1504,558],{"class":469},[460,1506,561],{"class":469},[460,1508,758],{"class":469},[460,1510,761],{"class":473},[460,1512,764],{"class":469},[460,1514,561],{"class":469},[460,1516,1404],{"class":469},[460,1518,1407],{"class":473},[460,1520,669],{"class":469},[460,1522,686],{"class":547},[460,1524,568],{"class":469},[460,1526,1527,1529,1531],{"class":462,"line":597},[460,1528,823],{"class":469},[460,1530,68],{"class":547},[460,1532,568],{"class":469},[460,1534,1535,1537,1539],{"class":462,"line":666},[460,1536,669],{"class":469},[460,1538,686],{"class":547},[460,1540,568],{"class":469},[838,1542,1544],{"id":1543},"responsive","Responsive",[503,1546,1547,1550,1551,1554,1555,1557],{},[457,1548,1549],{},"breakpoints"," takes keen-slider responsive options, and ",[457,1552,1553],{},"per-view-auto"," sizes slides by their own width instead of ",[457,1556,531],{},":",[450,1559,1561],{"className":535,"code":1560,"language":537,"meta":455,"style":455},"\u003Ctemplate>\n  \u003CCarousel\n    :slides=\"slides\"\n    :slides-per-page=\"1\"\n    :breakpoints=\"{\n      '(min-width: 768px)': { slides: { perView: 2 } },\n      '(min-width: 1024px)': { slides: { perView: 4 } }\n    }\"\n  >\n    \u003Ctemplate #default=\"{ slide }\">…\u003C\u002Ftemplate>\n  \u003C\u002FCarousel>\n\u003C\u002Ftemplate>\n",[457,1562,1563,1571,1578,1593,1608,1621,1651,1676,1683,1688,1720,1728],{"__ignoreMap":455},[460,1564,1565,1567,1569],{"class":462,"line":463},[460,1566,544],{"class":469},[460,1568,686],{"class":547},[460,1570,568],{"class":469},[460,1572,1573,1575],{"class":462,"line":571},[460,1574,694],{"class":469},[460,1576,1577],{"class":547},"Carousel\n",[460,1579,1580,1583,1585,1587,1589,1591],{"class":462,"line":590},[460,1581,1582],{"class":469},"    :",[460,1584,523],{"class":551},[460,1586,558],{"class":469},[460,1588,561],{"class":469},[460,1590,523],{"class":473},[460,1592,501],{"class":469},[460,1594,1595,1597,1599,1601,1603,1606],{"class":462,"line":597},[460,1596,1582],{"class":469},[460,1598,531],{"class":551},[460,1600,558],{"class":469},[460,1602,561],{"class":469},[460,1604,1605],{"class":720},"1",[460,1607,501],{"class":469},[460,1609,1610,1612,1614,1616,1618],{"class":462,"line":666},[460,1611,1582],{"class":469},[460,1613,1549],{"class":551},[460,1615,558],{"class":469},[460,1617,561],{"class":469},[460,1619,1620],{"class":469},"{\n",[460,1622,1623,1626,1629,1632,1635,1637,1639,1642,1645,1648],{"class":462,"line":676},[460,1624,1625],{"class":469},"      '",[460,1627,1628],{"class":547},"(min-width: 768px)",[460,1630,1631],{"class":469},"'",[460,1633,1634],{"class":469},": { ",[460,1636,523],{"class":547},[460,1638,1634],{"class":469},[460,1640,1641],{"class":547},"perView",[460,1643,1644],{"class":469},": ",[460,1646,1647],{"class":720},"2",[460,1649,1650],{"class":469}," } },\n",[460,1652,1653,1655,1658,1660,1662,1664,1666,1668,1670,1673],{"class":462,"line":681},[460,1654,1625],{"class":469},[460,1656,1657],{"class":547},"(min-width: 1024px)",[460,1659,1631],{"class":469},[460,1661,1634],{"class":469},[460,1663,523],{"class":547},[460,1665,1634],{"class":469},[460,1667,1641],{"class":547},[460,1669,1644],{"class":469},[460,1671,1672],{"class":720},"4",[460,1674,1675],{"class":469}," } }\n",[460,1677,1678,1681],{"class":462,"line":691},[460,1679,1680],{"class":469},"    }",[460,1682,501],{"class":469},[460,1684,1685],{"class":462,"line":740},[460,1686,1687],{"class":469},"  >\n",[460,1689,1690,1692,1694,1696,1698,1700,1702,1704,1706,1708,1710,1712,1714,1716,1718],{"class":462,"line":771},[460,1691,743],{"class":469},[460,1693,686],{"class":547},[460,1695,748],{"class":469},[460,1697,751],{"class":551},[460,1699,558],{"class":469},[460,1701,561],{"class":469},[460,1703,758],{"class":469},[460,1705,761],{"class":473},[460,1707,764],{"class":469},[460,1709,561],{"class":469},[460,1711,1404],{"class":469},[460,1713,1407],{"class":473},[460,1715,669],{"class":469},[460,1717,686],{"class":547},[460,1719,568],{"class":469},[460,1721,1722,1724,1726],{"class":462,"line":794},[460,1723,823],{"class":469},[460,1725,68],{"class":547},[460,1727,568],{"class":469},[460,1729,1730,1732,1734],{"class":462,"line":800},[460,1731,669],{"class":469},[460,1733,686],{"class":547},[460,1735,568],{"class":469},[503,1737,1738,1739,1742,1743,1746],{},"Every slide element carries ",[457,1740,1741],{},"aria-roledescription"," — localize it with the ",[457,1744,1745],{},"slide-role-description"," prop.",[1748,1749,1750],"note",{},[503,1751,1752],{},"There is no playground for the carousel — it requires slide templates (scoped slots), which the playground cannot express. The demo on the Overview tab and the examples above cover the common setups.",[1754,1755,1756],"style",{},"html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}",{"title":455,"searchDepth":463,"depth":571,"links":1758},[1759,1760],{"id":447,"depth":571,"text":448},{"id":516,"depth":571,"text":517,"children":1761},[1762,1763,1764,1765],{"id":840,"depth":590,"text":841},{"id":1324,"depth":590,"text":1325},{"id":1432,"depth":590,"text":1433},{"id":1543,"depth":590,"text":1544},"Cycle through slides of content one page at a time.","md",null,{},"\u002Fcomponents\u002Fcarousel\u002Fdeveloper",{"title":68,"description":1766},"2.components\u002F05.carousel\u002F3.developer","24oezE8DpFkEH1ALPecOIdaUIOAKrfx9CH9vPRoU9tY",1793289680991]