[{"data":1,"prerenderedAt":1732},["ShallowReactive",2],{"navigation_docs":3,"-docs-framework-guides-react-nextjs":215,"-docs-framework-guides-react-nextjs-surround":1727},[4,20,50,165,175,185],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started",[10,15],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002F1.getting-started\u002F1.introduction","i-lucide-sprout",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"children":24,"page":6},"Framework Guides","\u002Fdocs\u002Fframework-guides","docs\u002F2.framework-guides",[25,30,35,40,45],{"title":26,"path":27,"stem":28,"icon":29},"Vue and Nuxt","\u002Fdocs\u002Fframework-guides\u002Fvue-nuxt","docs\u002F2.framework-guides\u002F1.vue-nuxt","i-simple-icons-vuedotjs",{"title":31,"path":32,"stem":33,"icon":34},"React and Next.js","\u002Fdocs\u002Fframework-guides\u002Freact-nextjs","docs\u002F2.framework-guides\u002F2.react-nextjs","i-simple-icons-react",{"title":36,"path":37,"stem":38,"icon":39},"Svelte and SvelteKit","\u002Fdocs\u002Fframework-guides\u002Fsvelte-sveltekit","docs\u002F2.framework-guides\u002F3.svelte-sveltekit","i-simple-icons-svelte",{"title":41,"path":42,"stem":43,"icon":44},"Web Components","\u002Fdocs\u002Fframework-guides\u002Fweb-components","docs\u002F2.framework-guides\u002F4.web-components","i-simple-icons-webcomponentsdotorg",{"title":46,"path":47,"stem":48,"icon":49},"Core","\u002Fdocs\u002Fframework-guides\u002Fcore","docs\u002F2.framework-guides\u002F5.core","i-lucide-braces",{"title":51,"path":52,"stem":53,"children":54,"page":6},"Examples","\u002Fdocs\u002Fexamples","docs\u002F3.examples",[55,100,135],{"title":56,"icon":6,"defaultOpen":6,"path":57,"stem":58,"children":59,"page":6},"Basic","\u002Fdocs\u002Fexamples\u002Fbasic","docs\u002F3.examples\u002F1.basic",[60,65,70,75,80,85,90,95],{"title":61,"path":62,"stem":63,"icon":64},"Simple","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fsimple","docs\u002F3.examples\u002F1.basic\u002F1.simple","i-lucide-square",{"title":66,"path":67,"stem":68,"icon":69},"Snapping","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fsnap","docs\u002F3.examples\u002F1.basic\u002F2.snap","i-lucide-magnet",{"title":71,"path":72,"stem":73,"icon":74},"Masonry","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fmasonry","docs\u002F3.examples\u002F1.basic\u002F3.masonry","i-lucide-grid-3x3",{"title":76,"path":77,"stem":78,"icon":79},"Right to Left","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fright-to-left","docs\u002F3.examples\u002F1.basic\u002F4.right-to-left","i-lucide-arrow-left-from-line",{"title":81,"path":82,"stem":83,"icon":84},"Sticky Slides","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fsticky","docs\u002F3.examples\u002F1.basic\u002F5.sticky","i-lucide-pin",{"title":86,"path":87,"stem":88,"icon":89},"Buttons","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fbuttons","docs\u002F3.examples\u002F1.basic\u002F6.buttons","i-lucide-circle-arrow-right",{"title":91,"path":92,"stem":93,"icon":94},"Dots","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fdots","docs\u002F3.examples\u002F1.basic\u002F7.dots","i-lucide-rectangle-ellipsis",{"title":96,"path":97,"stem":98,"icon":99},"Thumbnails","\u002Fdocs\u002Fexamples\u002Fbasic\u002Fthumbnails","docs\u002F3.examples\u002F1.basic\u002F8.thumbnails","i-lucide-layout-list",{"title":101,"icon":6,"defaultOpen":6,"path":102,"stem":103,"children":104,"page":6},"Advanced","\u002Fdocs\u002Fexamples\u002Fadvanced","docs\u002F3.examples\u002F2.advanced",[105,110,115,120,125,130],{"title":106,"path":107,"stem":108,"icon":109},"Cover Flow","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fcover-flow","docs\u002F3.examples\u002F2.advanced\u002F1.cover-flow","i-lucide-gallery-horizontal-end",{"title":111,"path":112,"stem":113,"icon":114},"Slideshow","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fslideshow","docs\u002F3.examples\u002F2.advanced\u002F2.slideshow","i-lucide-presentation",{"title":116,"path":117,"stem":118,"icon":119},"Stories","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fstories","docs\u002F3.examples\u002F2.advanced\u002F2.stories","i-lucide-circle-fading-plus",{"title":121,"path":122,"stem":123,"icon":124},"Smart Stack","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fsmart-stack","docs\u002F3.examples\u002F2.advanced\u002F3.smart-stack","i-lucide-layers",{"title":126,"path":127,"stem":128,"icon":129},"Cards","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fcards","docs\u002F3.examples\u002F2.advanced\u002F4.cards","i-lucide-images",{"title":131,"path":132,"stem":133,"icon":134},"Flipbook","\u002Fdocs\u002Fexamples\u002Fadvanced\u002Fflipbook","docs\u002F3.examples\u002F2.advanced\u002F5.flipbook","i-lucide-swatch-book",{"title":136,"icon":6,"defaultOpen":6,"path":137,"stem":138,"children":139,"page":6},"Experimental","\u002Fdocs\u002Fexamples\u002Fexperimental","docs\u002F3.examples\u002F3.experimental",[140,145,150,155,160],{"title":141,"path":142,"stem":143,"icon":144},"CSS Controls","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Fcss-controls","docs\u002F3.examples\u002F3.experimental\u002F1.css-controls","i-lucide-eclipse",{"title":146,"path":147,"stem":148,"icon":149},"Scroll State Query","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Fscroll-state-queries","docs\u002F3.examples\u002F3.experimental\u002F2.scroll-state-queries","i-lucide-anvil",{"title":151,"path":152,"stem":153,"icon":154},"Scroll Snap Events","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Fscroll-snap-changing","docs\u002F3.examples\u002F3.experimental\u002F3.scroll-snap-changing","i-lucide-megaphone",{"title":156,"path":157,"stem":158,"icon":159},"Repeat","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Frepeat","docs\u002F3.examples\u002F3.experimental\u002F4.repeat","i-lucide-repeat",{"title":161,"path":162,"stem":163,"icon":164},"Scroll Trigger","\u002Fdocs\u002Fexamples\u002Fexperimental\u002Fscroll-trigger","docs\u002F3.examples\u002F3.experimental\u002F5.scroll-trigger","i-lucide-bow-arrow",{"title":166,"path":167,"stem":168,"children":169,"page":6},"A11y","\u002Fdocs\u002Fa11y","docs\u002F4.a11y",[170],{"title":171,"path":172,"stem":173,"icon":174},"Accessibility Guide","\u002Fdocs\u002Fa11y\u002Faccessibility-guide","docs\u002F4.a11y\u002Faccessibility-guide","i-lucide-person-standing",{"title":176,"path":177,"stem":178,"children":179,"page":6},"Ai","\u002Fdocs\u002Fai","docs\u002F5.AI",[180],{"title":181,"path":182,"stem":183,"icon":184},"Agent Skills","\u002Fdocs\u002Fai\u002Fagent-skills","docs\u002F5.AI\u002F1.agent-skills","i-lucide-sparkles",{"title":186,"icon":6,"path":187,"stem":188,"children":189,"page":6},"Migration Guides","\u002Fdocs\u002Fmigration-guides","docs\u002F6.migration-guides",[190,195,200,205,210],{"title":191,"path":192,"stem":193,"icon":194},"Embla","\u002Fdocs\u002Fmigration-guides\u002Fembla","docs\u002F6.migration-guides\u002F1.embla","i-lucide-atom",{"title":196,"path":197,"stem":198,"icon":199},"Swiper","\u002Fdocs\u002Fmigration-guides\u002Fswiper","docs\u002F6.migration-guides\u002F2.swiper","i-lucide-circle-slash",{"title":201,"path":202,"stem":203,"icon":204},"Splide","\u002Fdocs\u002Fmigration-guides\u002Fsplide","docs\u002F6.migration-guides\u002F3.splide","i-lucide-diamond",{"title":206,"path":207,"stem":208,"icon":209},"Slick","\u002Fdocs\u002Fmigration-guides\u002Fslick","docs\u002F6.migration-guides\u002F4.slick","i-lucide-ampersand",{"title":211,"path":212,"stem":213,"icon":214},"Flickity","\u002Fdocs\u002Fmigration-guides\u002Fflickity","docs\u002F6.migration-guides\u002F5.flickity","i-lucide-smartphone",{"id":216,"title":31,"body":217,"description":1718,"extension":1719,"links":1720,"meta":1721,"navigation":1722,"path":32,"seo":1723,"stem":33,"__hash__":1726},"docs\u002Fdocs\u002F2.framework-guides\u002F2.react-nextjs.md",{"type":218,"value":219,"toc":1710},"minimark",[220,225,297,301,532,536,540,651,654,801,805,916,920,930,1212,1216,1219,1707],[221,222,224],"h2",{"id":223},"install","Install",[226,227,228,254,268,282],"code-group",{},[229,230,236],"pre",{"className":231,"code":232,"filename":233,"language":234,"meta":235,"style":235},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add @blossom-carousel\u002Freact\n","pnpm","bash","",[237,238,239],"code",{"__ignoreMap":235},[240,241,244,247,251],"span",{"class":242,"line":243},"line",1,[240,245,233],{"class":246},"sBMFI",[240,248,250],{"class":249},"sfazB"," add",[240,252,253],{"class":249}," @blossom-carousel\u002Freact\n",[229,255,258],{"className":231,"code":256,"filename":257,"language":234,"meta":235,"style":235},"bun add @blossom-carousel\u002Freact\n","bun",[237,259,260],{"__ignoreMap":235},[240,261,262,264,266],{"class":242,"line":243},[240,263,257],{"class":246},[240,265,250],{"class":249},[240,267,253],{"class":249},[229,269,272],{"className":231,"code":270,"filename":271,"language":234,"meta":235,"style":235},"yarn add @blossom-carousel\u002Freact\n","yarn",[237,273,274],{"__ignoreMap":235},[240,275,276,278,280],{"class":242,"line":243},[240,277,271],{"class":246},[240,279,250],{"class":249},[240,281,253],{"class":249},[229,283,286],{"className":231,"code":284,"filename":285,"language":234,"meta":235,"style":235},"npm install @blossom-carousel\u002Freact\n","npm",[237,287,288],{"__ignoreMap":235},[240,289,290,292,295],{"class":242,"line":243},[240,291,285],{"class":246},[240,293,294],{"class":249}," install",[240,296,253],{"class":249},[221,298,300],{"id":299},"react-usage","React usage",[229,302,306],{"className":303,"code":304,"language":305,"meta":235,"style":235},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { BlossomCarousel } from \"@blossom-carousel\u002Freact\";\nimport \"@blossom-carousel\u002Fcore\u002Fstyle.css\";\n\nexport function App() {\n  return (\n    \u003CBlossomCarousel>\n      {Array.from({ length: 12 }, (_, index) => (\n        \u003Cdiv key={index}>Slide {index + 1}\u003C\u002Fdiv>\n      ))}\n    \u003C\u002FBlossomCarousel>\n  );\n}\n","tsx",[237,307,308,340,354,361,381,391,403,458,500,509,519,527],{"__ignoreMap":235},[240,309,310,314,318,322,325,328,331,334,337],{"class":242,"line":243},[240,311,313],{"class":312},"s7zQu","import",[240,315,317],{"class":316},"sMK4o"," {",[240,319,321],{"class":320},"sTEyZ"," BlossomCarousel",[240,323,324],{"class":316}," }",[240,326,327],{"class":312}," from",[240,329,330],{"class":316}," \"",[240,332,333],{"class":249},"@blossom-carousel\u002Freact",[240,335,336],{"class":316},"\"",[240,338,339],{"class":316},";\n",[240,341,343,345,347,350,352],{"class":242,"line":342},2,[240,344,313],{"class":312},[240,346,330],{"class":316},[240,348,349],{"class":249},"@blossom-carousel\u002Fcore\u002Fstyle.css",[240,351,336],{"class":316},[240,353,339],{"class":316},[240,355,357],{"class":242,"line":356},3,[240,358,360],{"emptyLinePlaceholder":359},true,"\n",[240,362,364,367,371,375,378],{"class":242,"line":363},4,[240,365,366],{"class":312},"export",[240,368,370],{"class":369},"spNyl"," function",[240,372,374],{"class":373},"s2Zo4"," App",[240,376,377],{"class":316},"()",[240,379,380],{"class":316}," {\n",[240,382,384,387],{"class":242,"line":383},5,[240,385,386],{"class":312},"  return",[240,388,390],{"class":389},"swJcz"," (\n",[240,392,394,397,400],{"class":242,"line":393},6,[240,395,396],{"class":316},"    \u003C",[240,398,399],{"class":246},"BlossomCarousel",[240,401,402],{"class":316},">\n",[240,404,406,409,412,415,418,421,424,427,430,434,437,440,444,447,450,453,456],{"class":242,"line":405},7,[240,407,408],{"class":316},"      {",[240,410,411],{"class":320},"Array",[240,413,414],{"class":316},".",[240,416,417],{"class":373},"from",[240,419,420],{"class":320},"(",[240,422,423],{"class":316},"{",[240,425,426],{"class":389}," length",[240,428,429],{"class":316},":",[240,431,433],{"class":432},"sbssI"," 12",[240,435,436],{"class":316}," },",[240,438,439],{"class":316}," (",[240,441,443],{"class":442},"sHdIc","_",[240,445,446],{"class":316},",",[240,448,449],{"class":442}," index",[240,451,452],{"class":316},")",[240,454,455],{"class":369}," =>",[240,457,390],{"class":320},[240,459,461,464,467,470,473,476,479,482,484,487,490,493,496,498],{"class":242,"line":460},8,[240,462,463],{"class":316},"        \u003C",[240,465,466],{"class":389},"div",[240,468,469],{"class":369}," key",[240,471,472],{"class":316},"={",[240,474,475],{"class":320},"index",[240,477,478],{"class":316},"}>",[240,480,481],{"class":320},"Slide ",[240,483,423],{"class":316},[240,485,486],{"class":320},"index ",[240,488,489],{"class":316},"+",[240,491,492],{"class":432}," 1",[240,494,495],{"class":316},"}\u003C\u002F",[240,497,466],{"class":389},[240,499,402],{"class":316},[240,501,503,506],{"class":242,"line":502},9,[240,504,505],{"class":320},"      ))",[240,507,508],{"class":316},"}\n",[240,510,512,515,517],{"class":242,"line":511},10,[240,513,514],{"class":316},"    \u003C\u002F",[240,516,399],{"class":246},[240,518,402],{"class":316},[240,520,522,525],{"class":242,"line":521},11,[240,523,524],{"class":389},"  )",[240,526,339],{"class":316},[240,528,530],{"class":242,"line":529},12,[240,531,508],{"class":316},[221,533,535],{"id":534},"nextjs-setup","Next.js setup",[537,538,539],"p",{},"Import the core stylesheet from a global entry point.",[229,541,544],{"className":303,"code":542,"filename":543,"language":305,"meta":235,"style":235},"import \"@blossom-carousel\u002Fcore\u002Fstyle.css\";\n\nexport default function RootLayout({ children }) {\n  return (\n    \u003Chtml lang=\"en\">\n      \u003Cbody>{children}\u003C\u002Fbody>\n    \u003C\u002Fhtml>\n  );\n}\n","app\u002Flayout.tsx",[237,545,546,558,562,585,591,613,633,641,647],{"__ignoreMap":235},[240,547,548,550,552,554,556],{"class":242,"line":243},[240,549,313],{"class":312},[240,551,330],{"class":316},[240,553,349],{"class":249},[240,555,336],{"class":316},[240,557,339],{"class":316},[240,559,560],{"class":242,"line":342},[240,561,360],{"emptyLinePlaceholder":359},[240,563,564,566,569,571,574,577,580,583],{"class":242,"line":356},[240,565,366],{"class":312},[240,567,568],{"class":312}," default",[240,570,370],{"class":369},[240,572,573],{"class":373}," RootLayout",[240,575,576],{"class":316},"({",[240,578,579],{"class":442}," children",[240,581,582],{"class":316}," })",[240,584,380],{"class":316},[240,586,587,589],{"class":242,"line":363},[240,588,386],{"class":312},[240,590,390],{"class":389},[240,592,593,595,598,601,604,606,609,611],{"class":242,"line":383},[240,594,396],{"class":316},[240,596,597],{"class":389},"html",[240,599,600],{"class":369}," lang",[240,602,603],{"class":316},"=",[240,605,336],{"class":316},[240,607,608],{"class":249},"en",[240,610,336],{"class":316},[240,612,402],{"class":316},[240,614,615,618,621,624,627,629,631],{"class":242,"line":393},[240,616,617],{"class":316},"      \u003C",[240,619,620],{"class":389},"body",[240,622,623],{"class":316},">{",[240,625,626],{"class":320},"children",[240,628,495],{"class":316},[240,630,620],{"class":389},[240,632,402],{"class":316},[240,634,635,637,639],{"class":242,"line":405},[240,636,514],{"class":316},[240,638,597],{"class":389},[240,640,402],{"class":316},[240,642,643,645],{"class":242,"line":460},[240,644,524],{"class":389},[240,646,339],{"class":316},[240,648,649],{"class":242,"line":502},[240,650,508],{"class":316},[537,652,653],{},"Then render the carousel from a component.",[229,655,658],{"className":303,"code":656,"filename":657,"language":305,"meta":235,"style":235},"import { BlossomCarousel } from \"@blossom-carousel\u002Freact\";\n\nexport function FeaturedCarousel() {\n  return (\n    \u003CBlossomCarousel>\n      {Array.from({ length: 12 }, (_, index) => (\n        \u003Cdiv key={index}>Slide {index + 1}\u003C\u002Fdiv>\n      ))}\n    \u003C\u002FBlossomCarousel>\n  );\n}\n","BlossomCarousel.tsx",[237,659,660,680,684,697,703,711,747,777,783,791,797],{"__ignoreMap":235},[240,661,662,664,666,668,670,672,674,676,678],{"class":242,"line":243},[240,663,313],{"class":312},[240,665,317],{"class":316},[240,667,321],{"class":320},[240,669,324],{"class":316},[240,671,327],{"class":312},[240,673,330],{"class":316},[240,675,333],{"class":249},[240,677,336],{"class":316},[240,679,339],{"class":316},[240,681,682],{"class":242,"line":342},[240,683,360],{"emptyLinePlaceholder":359},[240,685,686,688,690,693,695],{"class":242,"line":356},[240,687,366],{"class":312},[240,689,370],{"class":369},[240,691,692],{"class":373}," FeaturedCarousel",[240,694,377],{"class":316},[240,696,380],{"class":316},[240,698,699,701],{"class":242,"line":363},[240,700,386],{"class":312},[240,702,390],{"class":389},[240,704,705,707,709],{"class":242,"line":383},[240,706,396],{"class":316},[240,708,399],{"class":246},[240,710,402],{"class":316},[240,712,713,715,717,719,721,723,725,727,729,731,733,735,737,739,741,743,745],{"class":242,"line":393},[240,714,408],{"class":316},[240,716,411],{"class":320},[240,718,414],{"class":316},[240,720,417],{"class":373},[240,722,420],{"class":320},[240,724,423],{"class":316},[240,726,426],{"class":389},[240,728,429],{"class":316},[240,730,433],{"class":432},[240,732,436],{"class":316},[240,734,439],{"class":316},[240,736,443],{"class":442},[240,738,446],{"class":316},[240,740,449],{"class":442},[240,742,452],{"class":316},[240,744,455],{"class":369},[240,746,390],{"class":320},[240,748,749,751,753,755,757,759,761,763,765,767,769,771,773,775],{"class":242,"line":405},[240,750,463],{"class":316},[240,752,466],{"class":389},[240,754,469],{"class":369},[240,756,472],{"class":316},[240,758,475],{"class":320},[240,760,478],{"class":316},[240,762,481],{"class":320},[240,764,423],{"class":316},[240,766,486],{"class":320},[240,768,489],{"class":316},[240,770,492],{"class":432},[240,772,495],{"class":316},[240,774,466],{"class":389},[240,776,402],{"class":316},[240,778,779,781],{"class":242,"line":460},[240,780,505],{"class":320},[240,782,508],{"class":316},[240,784,785,787,789],{"class":242,"line":502},[240,786,514],{"class":316},[240,788,399],{"class":246},[240,790,402],{"class":316},[240,792,793,795],{"class":242,"line":511},[240,794,524],{"class":389},[240,796,339],{"class":316},[240,798,799],{"class":242,"line":521},[240,800,508],{"class":316},[221,802,804],{"id":803},"semantic-root-element","Semantic root element",[229,806,808],{"className":303,"code":807,"language":305,"meta":235,"style":235},"\u003CBlossomCarousel as=\"ul\">\n  {Array.from({ length: 12 }, (_, index) => (\n    \u003Cli key={index}>Slide {index + 1}\u003C\u002Fli>\n  ))}\n\u003C\u002FBlossomCarousel>;\n",[237,809,810,831,868,899,906],{"__ignoreMap":235},[240,811,812,815,817,820,822,824,827,829],{"class":242,"line":243},[240,813,814],{"class":316},"\u003C",[240,816,399],{"class":246},[240,818,819],{"class":369}," as",[240,821,603],{"class":316},[240,823,336],{"class":316},[240,825,826],{"class":249},"ul",[240,828,336],{"class":316},[240,830,402],{"class":316},[240,832,833,836,838,840,842,844,846,848,850,852,854,856,858,860,862,864,866],{"class":242,"line":342},[240,834,835],{"class":316},"  {",[240,837,411],{"class":320},[240,839,414],{"class":316},[240,841,417],{"class":373},[240,843,420],{"class":320},[240,845,423],{"class":316},[240,847,426],{"class":389},[240,849,429],{"class":316},[240,851,433],{"class":432},[240,853,436],{"class":316},[240,855,439],{"class":316},[240,857,443],{"class":442},[240,859,446],{"class":316},[240,861,449],{"class":442},[240,863,452],{"class":316},[240,865,455],{"class":369},[240,867,390],{"class":320},[240,869,870,872,875,877,879,881,883,885,887,889,891,893,895,897],{"class":242,"line":356},[240,871,396],{"class":316},[240,873,874],{"class":389},"li",[240,876,469],{"class":369},[240,878,472],{"class":316},[240,880,475],{"class":320},[240,882,478],{"class":316},[240,884,481],{"class":320},[240,886,423],{"class":316},[240,888,486],{"class":320},[240,890,489],{"class":316},[240,892,492],{"class":432},[240,894,495],{"class":316},[240,896,874],{"class":389},[240,898,402],{"class":316},[240,900,901,904],{"class":242,"line":363},[240,902,903],{"class":320},"  ))",[240,905,508],{"class":316},[240,907,908,911,913],{"class":242,"line":383},[240,909,910],{"class":316},"\u003C\u002F",[240,912,399],{"class":246},[240,914,915],{"class":316},">;\n",[221,917,919],{"id":918},"button-controls","Button controls",[537,921,922,923,926,927,414],{},"Navigate the carousel programmatically with ",[237,924,925],{},"prev()"," and ",[237,928,929],{},"next()",[229,931,933],{"className":303,"code":932,"language":305,"meta":235,"style":235},"import { useRef } from \"react\";\n\nexport function App() {\n  const blossomCarousel = useRef(null);\n\n  return (\n    \u003C>\n      \u003CBlossomCarousel ref={blossomCarousel}>\n        {Array.from({ length: 12 }, (_, index) => (\n          \u003Cdiv key={index}>Slide {index + 1}\u003C\u002Fdiv>\n        ))}\n      \u003C\u002FBlossomCarousel>\n\n      \u003Cbutton onClick={() => blossomCarousel.current.prev()}>Previous\u003C\u002Fbutton>\n      \u003Cbutton onClick={() => blossomCarousel.current.next()}>Next\u003C\u002Fbutton>\n    \u003C\u002F>\n  );\n}\n",[237,934,935,957,961,973,995,999,1005,1010,1027,1064,1095,1102,1111,1116,1157,1194,1200,1207],{"__ignoreMap":235},[240,936,937,939,941,944,946,948,950,953,955],{"class":242,"line":243},[240,938,313],{"class":312},[240,940,317],{"class":316},[240,942,943],{"class":320}," useRef",[240,945,324],{"class":316},[240,947,327],{"class":312},[240,949,330],{"class":316},[240,951,952],{"class":249},"react",[240,954,336],{"class":316},[240,956,339],{"class":316},[240,958,959],{"class":242,"line":342},[240,960,360],{"emptyLinePlaceholder":359},[240,962,963,965,967,969,971],{"class":242,"line":356},[240,964,366],{"class":312},[240,966,370],{"class":369},[240,968,374],{"class":373},[240,970,377],{"class":316},[240,972,380],{"class":316},[240,974,975,978,981,984,986,988,991,993],{"class":242,"line":363},[240,976,977],{"class":369},"  const",[240,979,980],{"class":320}," blossomCarousel",[240,982,983],{"class":316}," =",[240,985,943],{"class":373},[240,987,420],{"class":389},[240,989,990],{"class":316},"null",[240,992,452],{"class":389},[240,994,339],{"class":316},[240,996,997],{"class":242,"line":383},[240,998,360],{"emptyLinePlaceholder":359},[240,1000,1001,1003],{"class":242,"line":393},[240,1002,386],{"class":312},[240,1004,390],{"class":389},[240,1006,1007],{"class":242,"line":405},[240,1008,1009],{"class":316},"    \u003C>\n",[240,1011,1012,1014,1016,1019,1021,1024],{"class":242,"line":460},[240,1013,617],{"class":316},[240,1015,399],{"class":246},[240,1017,1018],{"class":369}," ref",[240,1020,472],{"class":316},[240,1022,1023],{"class":320},"blossomCarousel",[240,1025,1026],{"class":316},"}>\n",[240,1028,1029,1032,1034,1036,1038,1040,1042,1044,1046,1048,1050,1052,1054,1056,1058,1060,1062],{"class":242,"line":502},[240,1030,1031],{"class":316},"        {",[240,1033,411],{"class":320},[240,1035,414],{"class":316},[240,1037,417],{"class":373},[240,1039,420],{"class":320},[240,1041,423],{"class":316},[240,1043,426],{"class":389},[240,1045,429],{"class":316},[240,1047,433],{"class":432},[240,1049,436],{"class":316},[240,1051,439],{"class":316},[240,1053,443],{"class":442},[240,1055,446],{"class":316},[240,1057,449],{"class":442},[240,1059,452],{"class":316},[240,1061,455],{"class":369},[240,1063,390],{"class":320},[240,1065,1066,1069,1071,1073,1075,1077,1079,1081,1083,1085,1087,1089,1091,1093],{"class":242,"line":511},[240,1067,1068],{"class":316},"          \u003C",[240,1070,466],{"class":389},[240,1072,469],{"class":369},[240,1074,472],{"class":316},[240,1076,475],{"class":320},[240,1078,478],{"class":316},[240,1080,481],{"class":320},[240,1082,423],{"class":316},[240,1084,486],{"class":320},[240,1086,489],{"class":316},[240,1088,492],{"class":432},[240,1090,495],{"class":316},[240,1092,466],{"class":389},[240,1094,402],{"class":316},[240,1096,1097,1100],{"class":242,"line":521},[240,1098,1099],{"class":320},"        ))",[240,1101,508],{"class":316},[240,1103,1104,1107,1109],{"class":242,"line":529},[240,1105,1106],{"class":316},"      \u003C\u002F",[240,1108,399],{"class":246},[240,1110,402],{"class":316},[240,1112,1114],{"class":242,"line":1113},13,[240,1115,360],{"emptyLinePlaceholder":359},[240,1117,1119,1121,1124,1127,1130,1132,1134,1136,1139,1141,1144,1146,1148,1151,1153,1155],{"class":242,"line":1118},14,[240,1120,617],{"class":316},[240,1122,1123],{"class":389},"button",[240,1125,1126],{"class":369}," onClick",[240,1128,1129],{"class":316},"={()",[240,1131,455],{"class":369},[240,1133,980],{"class":320},[240,1135,414],{"class":316},[240,1137,1138],{"class":320},"current",[240,1140,414],{"class":316},[240,1142,1143],{"class":373},"prev",[240,1145,377],{"class":320},[240,1147,478],{"class":316},[240,1149,1150],{"class":320},"Previous",[240,1152,910],{"class":316},[240,1154,1123],{"class":389},[240,1156,402],{"class":316},[240,1158,1160,1162,1164,1166,1168,1170,1172,1174,1176,1178,1181,1183,1185,1188,1190,1192],{"class":242,"line":1159},15,[240,1161,617],{"class":316},[240,1163,1123],{"class":389},[240,1165,1126],{"class":369},[240,1167,1129],{"class":316},[240,1169,455],{"class":369},[240,1171,980],{"class":320},[240,1173,414],{"class":316},[240,1175,1138],{"class":320},[240,1177,414],{"class":316},[240,1179,1180],{"class":373},"next",[240,1182,377],{"class":320},[240,1184,478],{"class":316},[240,1186,1187],{"class":320},"Next",[240,1189,910],{"class":316},[240,1191,1123],{"class":389},[240,1193,402],{"class":316},[240,1195,1197],{"class":242,"line":1196},16,[240,1198,1199],{"class":316},"    \u003C\u002F>\n",[240,1201,1203,1205],{"class":242,"line":1202},17,[240,1204,524],{"class":389},[240,1206,339],{"class":316},[240,1208,1210],{"class":242,"line":1209},18,[240,1211,508],{"class":316},[221,1213,1215],{"id":1214},"overscroll-api","Overscroll API",[537,1217,1218],{},"Tap into Blossom's drag engine's overscroll behavior to create your own style.",[229,1220,1222],{"className":303,"code":1221,"language":305,"meta":235,"style":235},"import { useRef } from \"react\";\nimport { BlossomCarousel } from \"@blossom-carousel\u002Freact\";\n\nexport function App() {\n  const blossomCarousel = useRef\u003CHTMLElement | null>(null);\n\n  function onOverscroll(event: CustomEvent\u003C{ left: number }>) {\n    \u002F\u002F prevent and overwrite Blossom's default rubberbanding effect\n    event.preventDefault();\n\n    const overScroll = event.detail.left;\n\n    Array.from(blossomCarousel.current?.children ?? []).forEach((slide) => {\n      (slide as HTMLElement).style.transform = `scale(${1 - overScroll * 0.1})`;\n    });\n  }\n\n  return (\n    \u003CBlossomCarousel\n      ref={blossomCarousel}\n      onOverscroll={(event) => {\n        onOverscroll(event as CustomEvent\u003C{ left: number }>);\n      }}\n    >\n      {Array.from({ length: 12 }, (_, index) => (\n        \u003Cdiv key={index}>Slide {index + 1}\u003C\u002Fdiv>\n      ))}\n    \u003C\u002FBlossomCarousel>\n  );\n}\n",[237,1223,1224,1244,1264,1268,1280,1312,1316,1350,1356,1370,1374,1399,1403,1449,1509,1518,1523,1527,1533,1541,1553,1570,1599,1605,1611,1648,1679,1686,1695,1702],{"__ignoreMap":235},[240,1225,1226,1228,1230,1232,1234,1236,1238,1240,1242],{"class":242,"line":243},[240,1227,313],{"class":312},[240,1229,317],{"class":316},[240,1231,943],{"class":320},[240,1233,324],{"class":316},[240,1235,327],{"class":312},[240,1237,330],{"class":316},[240,1239,952],{"class":249},[240,1241,336],{"class":316},[240,1243,339],{"class":316},[240,1245,1246,1248,1250,1252,1254,1256,1258,1260,1262],{"class":242,"line":342},[240,1247,313],{"class":312},[240,1249,317],{"class":316},[240,1251,321],{"class":320},[240,1253,324],{"class":316},[240,1255,327],{"class":312},[240,1257,330],{"class":316},[240,1259,333],{"class":249},[240,1261,336],{"class":316},[240,1263,339],{"class":316},[240,1265,1266],{"class":242,"line":356},[240,1267,360],{"emptyLinePlaceholder":359},[240,1269,1270,1272,1274,1276,1278],{"class":242,"line":363},[240,1271,366],{"class":312},[240,1273,370],{"class":369},[240,1275,374],{"class":373},[240,1277,377],{"class":316},[240,1279,380],{"class":316},[240,1281,1282,1284,1286,1288,1290,1292,1295,1298,1301,1304,1306,1308,1310],{"class":242,"line":383},[240,1283,977],{"class":369},[240,1285,980],{"class":320},[240,1287,983],{"class":316},[240,1289,943],{"class":373},[240,1291,814],{"class":316},[240,1293,1294],{"class":246},"HTMLElement",[240,1296,1297],{"class":316}," |",[240,1299,1300],{"class":246}," null",[240,1302,1303],{"class":316},">",[240,1305,420],{"class":389},[240,1307,990],{"class":316},[240,1309,452],{"class":389},[240,1311,339],{"class":316},[240,1313,1314],{"class":242,"line":393},[240,1315,360],{"emptyLinePlaceholder":359},[240,1317,1318,1321,1324,1326,1329,1331,1334,1337,1340,1342,1345,1348],{"class":242,"line":405},[240,1319,1320],{"class":369},"  function",[240,1322,1323],{"class":373}," onOverscroll",[240,1325,420],{"class":316},[240,1327,1328],{"class":442},"event",[240,1330,429],{"class":316},[240,1332,1333],{"class":246}," CustomEvent",[240,1335,1336],{"class":316},"\u003C{",[240,1338,1339],{"class":389}," left",[240,1341,429],{"class":316},[240,1343,1344],{"class":246}," number",[240,1346,1347],{"class":316}," }>)",[240,1349,380],{"class":316},[240,1351,1352],{"class":242,"line":460},[240,1353,1355],{"class":1354},"sHwdD","    \u002F\u002F prevent and overwrite Blossom's default rubberbanding effect\n",[240,1357,1358,1361,1363,1366,1368],{"class":242,"line":502},[240,1359,1360],{"class":320},"    event",[240,1362,414],{"class":316},[240,1364,1365],{"class":373},"preventDefault",[240,1367,377],{"class":389},[240,1369,339],{"class":316},[240,1371,1372],{"class":242,"line":511},[240,1373,360],{"emptyLinePlaceholder":359},[240,1375,1376,1379,1382,1384,1387,1389,1392,1394,1397],{"class":242,"line":521},[240,1377,1378],{"class":369},"    const",[240,1380,1381],{"class":320}," overScroll",[240,1383,983],{"class":316},[240,1385,1386],{"class":320}," event",[240,1388,414],{"class":316},[240,1390,1391],{"class":320},"detail",[240,1393,414],{"class":316},[240,1395,1396],{"class":320},"left",[240,1398,339],{"class":316},[240,1400,1401],{"class":242,"line":529},[240,1402,360],{"emptyLinePlaceholder":359},[240,1404,1405,1408,1410,1412,1414,1416,1418,1420,1423,1425,1428,1431,1433,1436,1438,1440,1443,1445,1447],{"class":242,"line":1113},[240,1406,1407],{"class":320},"    Array",[240,1409,414],{"class":316},[240,1411,417],{"class":373},[240,1413,420],{"class":389},[240,1415,1023],{"class":320},[240,1417,414],{"class":316},[240,1419,1138],{"class":320},[240,1421,1422],{"class":316},"?.",[240,1424,626],{"class":320},[240,1426,1427],{"class":316}," ??",[240,1429,1430],{"class":389}," [])",[240,1432,414],{"class":316},[240,1434,1435],{"class":373},"forEach",[240,1437,420],{"class":389},[240,1439,420],{"class":316},[240,1441,1442],{"class":442},"slide",[240,1444,452],{"class":316},[240,1446,455],{"class":369},[240,1448,380],{"class":316},[240,1450,1451,1454,1456,1458,1461,1463,1465,1468,1470,1473,1475,1478,1481,1484,1487,1490,1493,1496,1499,1502,1504,1507],{"class":242,"line":1118},[240,1452,1453],{"class":389},"      (",[240,1455,1442],{"class":320},[240,1457,819],{"class":312},[240,1459,1460],{"class":246}," HTMLElement",[240,1462,452],{"class":389},[240,1464,414],{"class":316},[240,1466,1467],{"class":320},"style",[240,1469,414],{"class":316},[240,1471,1472],{"class":320},"transform",[240,1474,983],{"class":316},[240,1476,1477],{"class":316}," `",[240,1479,1480],{"class":249},"scale(",[240,1482,1483],{"class":316},"${",[240,1485,1486],{"class":432},"1",[240,1488,1489],{"class":316}," -",[240,1491,1492],{"class":320}," overScroll ",[240,1494,1495],{"class":316},"*",[240,1497,1498],{"class":432}," 0.1",[240,1500,1501],{"class":316},"}",[240,1503,452],{"class":249},[240,1505,1506],{"class":316},"`",[240,1508,339],{"class":316},[240,1510,1511,1514,1516],{"class":242,"line":1159},[240,1512,1513],{"class":316},"    }",[240,1515,452],{"class":389},[240,1517,339],{"class":316},[240,1519,1520],{"class":242,"line":1196},[240,1521,1522],{"class":316},"  }\n",[240,1524,1525],{"class":242,"line":1202},[240,1526,360],{"emptyLinePlaceholder":359},[240,1528,1529,1531],{"class":242,"line":1209},[240,1530,386],{"class":312},[240,1532,390],{"class":389},[240,1534,1536,1538],{"class":242,"line":1535},19,[240,1537,396],{"class":316},[240,1539,1540],{"class":246},"BlossomCarousel\n",[240,1542,1544,1547,1549,1551],{"class":242,"line":1543},20,[240,1545,1546],{"class":369},"      ref",[240,1548,472],{"class":316},[240,1550,1023],{"class":320},[240,1552,508],{"class":316},[240,1554,1556,1559,1562,1564,1566,1568],{"class":242,"line":1555},21,[240,1557,1558],{"class":369},"      onOverscroll",[240,1560,1561],{"class":316},"={(",[240,1563,1328],{"class":442},[240,1565,452],{"class":316},[240,1567,455],{"class":369},[240,1569,380],{"class":316},[240,1571,1573,1576,1578,1580,1582,1584,1586,1588,1590,1592,1595,1597],{"class":242,"line":1572},22,[240,1574,1575],{"class":373},"        onOverscroll",[240,1577,420],{"class":389},[240,1579,1328],{"class":320},[240,1581,819],{"class":312},[240,1583,1333],{"class":246},[240,1585,1336],{"class":316},[240,1587,1339],{"class":389},[240,1589,429],{"class":316},[240,1591,1344],{"class":246},[240,1593,1594],{"class":316}," }>",[240,1596,452],{"class":389},[240,1598,339],{"class":316},[240,1600,1602],{"class":242,"line":1601},23,[240,1603,1604],{"class":316},"      }}\n",[240,1606,1608],{"class":242,"line":1607},24,[240,1609,1610],{"class":316},"    >\n",[240,1612,1614,1616,1618,1620,1622,1624,1626,1628,1630,1632,1634,1636,1638,1640,1642,1644,1646],{"class":242,"line":1613},25,[240,1615,408],{"class":316},[240,1617,411],{"class":320},[240,1619,414],{"class":316},[240,1621,417],{"class":373},[240,1623,420],{"class":320},[240,1625,423],{"class":316},[240,1627,426],{"class":389},[240,1629,429],{"class":316},[240,1631,433],{"class":432},[240,1633,436],{"class":316},[240,1635,439],{"class":316},[240,1637,443],{"class":442},[240,1639,446],{"class":316},[240,1641,449],{"class":442},[240,1643,452],{"class":316},[240,1645,455],{"class":369},[240,1647,390],{"class":320},[240,1649,1651,1653,1655,1657,1659,1661,1663,1665,1667,1669,1671,1673,1675,1677],{"class":242,"line":1650},26,[240,1652,463],{"class":316},[240,1654,466],{"class":389},[240,1656,469],{"class":369},[240,1658,472],{"class":316},[240,1660,475],{"class":320},[240,1662,478],{"class":316},[240,1664,481],{"class":320},[240,1666,423],{"class":316},[240,1668,486],{"class":320},[240,1670,489],{"class":316},[240,1672,492],{"class":432},[240,1674,495],{"class":316},[240,1676,466],{"class":389},[240,1678,402],{"class":316},[240,1680,1682,1684],{"class":242,"line":1681},27,[240,1683,505],{"class":320},[240,1685,508],{"class":316},[240,1687,1689,1691,1693],{"class":242,"line":1688},28,[240,1690,514],{"class":316},[240,1692,399],{"class":246},[240,1694,402],{"class":316},[240,1696,1698,1700],{"class":242,"line":1697},29,[240,1699,524],{"class":389},[240,1701,339],{"class":316},[240,1703,1705],{"class":242,"line":1704},30,[240,1706,508],{"class":316},[1467,1708,1709],{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":235,"searchDepth":342,"depth":342,"links":1711},[1712,1713,1714,1715,1716,1717],{"id":223,"depth":342,"text":224},{"id":299,"depth":342,"text":300},{"id":534,"depth":342,"text":535},{"id":803,"depth":342,"text":804},{"id":918,"depth":342,"text":919},{"id":1214,"depth":342,"text":1215},"Use Blossom Carousel in React and Next.js apps with tsx, global styles, and semantic root elements.","md",null,{},{"icon":34},{"title":1724,"description":1725},"React carousel component for Blossom Carousel and Next.js","Install and use the Blossom Carousel React component in React and Next.js with native scrolling and CSS-defined layouts.","53F8lapmn91l-VtaVEwlx9gajwilXTQBJgZBF5cUwKU",[1728,1730],{"title":26,"path":27,"stem":28,"description":1729,"icon":29,"children":-1},"Use Blossom Carousel in Vue and Nuxt apps with local imports or global plugin registration.",{"title":36,"path":37,"stem":38,"description":1731,"icon":39,"children":-1},"Use Blossom Carousel in Svelte and SvelteKit with keyed each blocks and global stylesheet imports.",1780251481875]