[{"data":1,"prerenderedAt":445},["ShallowReactive",2],{"navigation_docs":3,"-docs-getting-started-installation":215,"-docs-getting-started-installation-surround":440},[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":16,"body":217,"description":431,"extension":432,"links":433,"meta":434,"navigation":435,"path":17,"seo":436,"stem":18,"__hash__":439},"docs\u002Fdocs\u002F1.getting-started\u002F2.installation.md",{"type":218,"value":219,"toc":425},"minimark",[220,256,261,264,354,358,361,421],[221,222,226,230,247],"prompt",{":actions":223,"description":224,"icon":225},"[\"copy\",\"cursor\"]","Ask my Agent to install Blossom Carousel","i-lucide-square-chevron-right",[227,228,229],"p",{},"Install Blossom Carousel in my project.",[231,232,233,237,244],"ul",{},[234,235,236],"li",{},"Detect the framework I'm using (Vue or Nuxt, React or Next.js, Svelte or SvelteKit, Web Components, or standalone)",[234,238,239,240],{},"Install Blossom Carousel with my package manager: pnpm add @blossom-carousel\u002F",[241,242,243],"framework",{}," (or npm\u002Fyarn\u002Fbun)",[234,245,246],{},"Wire up the framework-specific plugin or component",[227,248,249,250],{},"Docs: ",[251,252,253],"a",{"href":253,"rel":254},"https:\u002F\u002Fwww.blossom-carousel.com\u002Fstart\u002Finstallation",[255],"nofollow",[257,258,260],"h2",{"id":259},"install","Install",[227,262,263],{},"Install the package that matches your framework or use Blossom manually with the Core package.",[265,266,268,295,310,325,340],"code-group",{"sync":267},"migration-code-style",[269,270,276],"pre",{"className":271,"code":272,"filename":273,"language":274,"meta":275,"style":275},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install @blossom-carousel\u002Fvue\n","Vue","bash","",[277,278,279],"code",{"__ignoreMap":275},[280,281,284,288,292],"span",{"class":282,"line":283},"line",1,[280,285,287],{"class":286},"sBMFI","npm",[280,289,291],{"class":290},"sfazB"," install",[280,293,294],{"class":290}," @blossom-carousel\u002Fvue\n",[269,296,299],{"className":271,"code":297,"filename":298,"language":274,"meta":275,"style":275},"npm install @blossom-carousel\u002Freact\n","React",[277,300,301],{"__ignoreMap":275},[280,302,303,305,307],{"class":282,"line":283},[280,304,287],{"class":286},[280,306,291],{"class":290},[280,308,309],{"class":290}," @blossom-carousel\u002Freact\n",[269,311,314],{"className":271,"code":312,"filename":313,"language":274,"meta":275,"style":275},"npm install @blossom-carousel\u002Fsvelte\n","Svelte",[277,315,316],{"__ignoreMap":275},[280,317,318,320,322],{"class":282,"line":283},[280,319,287],{"class":286},[280,321,291],{"class":290},[280,323,324],{"class":290}," @blossom-carousel\u002Fsvelte\n",[269,326,329],{"className":271,"code":327,"filename":328,"language":274,"meta":275,"style":275},"npm install @blossom-carousel\u002Fweb\n","Web",[277,330,331],{"__ignoreMap":275},[280,332,333,335,337],{"class":282,"line":283},[280,334,287],{"class":286},[280,336,291],{"class":290},[280,338,339],{"class":290}," @blossom-carousel\u002Fweb\n",[269,341,343],{"className":271,"code":342,"filename":46,"language":274,"meta":275,"style":275},"npm install @blossom-carousel\u002Fcore\n",[277,344,345],{"__ignoreMap":275},[280,346,347,349,351],{"class":282,"line":283},[280,348,287],{"class":286},[280,350,291],{"class":290},[280,352,353],{"class":290}," @blossom-carousel\u002Fcore\n",[257,355,357],{"id":356},"using-agent-skills","Using Agent Skills",[227,359,360],{},"If you use an AI assistant (Claude Code, Cursor, etc.), install the blossom-carousel skill for guided setup and code review:",[362,363,364,384,388,391],"code-block",{},[269,365,368],{"className":271,"code":366,"filename":367,"language":274,"meta":275,"style":275},"npx skills add https:\u002F\u002Fwww.blossom-carousel.com\n","Terminal",[277,369,370],{"__ignoreMap":275},[280,371,372,375,378,381],{"class":282,"line":283},[280,373,374],{"class":286},"npx",[280,376,377],{"class":290}," skills",[280,379,380],{"class":290}," add",[280,382,383],{"class":290}," https:\u002F\u002Fwww.blossom-carousel.com\n",[257,385,387],{"id":386},"packages","Packages",[227,389,390],{},"Blossom is available as framework wrappers and as a framework-agnostic core package.",[392,393,394,401,406,411,416],"card-group",{},[395,396,397,398],"card",{"icon":29,"title":26,"to":27},"Start with ",[277,399,400],{},"@blossom-carousel\u002Fvue",[395,402,397,403],{"icon":34,"title":31,"to":32},[277,404,405],{},"@blossom-carousel\u002Freact",[395,407,397,408],{"icon":39,"title":36,"to":37},[277,409,410],{},"@blossom-carousel\u002Fsvelte",[395,412,397,413],{"icon":44,"title":41,"to":42},[277,414,415],{},"@blossom-carousel\u002Fweb",[395,417,397,418],{"icon":49,"title":46,"to":47},[277,419,420],{},"@blossom-carousel\u002Fcore",[422,423,424],"style",{},"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);}",{"title":275,"searchDepth":426,"depth":426,"links":427},2,[428,429,430],{"id":259,"depth":426,"text":260},{"id":356,"depth":426,"text":357},{"id":386,"depth":426,"text":387},"Install Blossom Carousel for Vue, React, Svelte, Web Components, or direct Core usage.","md",null,{},{"icon":19},{"title":437,"description":438},"Install Blossom Carousel","Add Blossom Carousel to your React, Vue, Svelte, Web Components project, or directly in TypeScript.","rD-gfrWpJXkVah2PECkWMMyE4HZW8Ar8cTronuhFjtg",[441,443],{"title":11,"path":12,"stem":13,"description":442,"icon":14,"children":-1},"Blossom Carousel is draggable and scrollable and maintains all native browser behavior.",{"title":26,"path":27,"stem":28,"description":444,"icon":29,"children":-1},"Use Blossom Carousel in Vue and Nuxt apps with local imports or global plugin registration.",1780243958845]