[{"data":1,"prerenderedAt":1285},["ShallowReactive",2],{"navigation_docs":3,"-docs-framework-guides-svelte-sveltekit":215,"-docs-framework-guides-svelte-sveltekit-surround":1280},[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":36,"body":217,"description":1271,"extension":1272,"links":1273,"meta":1274,"navigation":1275,"path":37,"seo":1276,"stem":38,"__hash__":1279},"docs\u002Fdocs\u002F2.framework-guides\u002F3.svelte-sveltekit.md",{"type":218,"value":219,"toc":1263},"minimark",[220,225,297,301,532,536,540,588,591,650,654,730,734,744,909,913,916,1260],[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\u002Fsvelte\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\u002Fsvelte\n",[229,255,258],{"className":231,"code":256,"filename":257,"language":234,"meta":235,"style":235},"bun add @blossom-carousel\u002Fsvelte\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\u002Fsvelte\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\u002Fsvelte\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},"svelte-usage","Svelte usage",[229,302,306],{"className":303,"code":304,"language":305,"meta":235,"style":235},"language-svelte shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript>\n  import BlossomCarousel from \"@blossom-carousel\u002Fsvelte\";\n  import \"@blossom-carousel\u002Fcore\u002Fstyle.css\";\n\n  const slides = Array.from({ length: 12 }, (_, index) => index + 1);\n\u003C\u002Fscript>\n\n\u003CBlossomCarousel>\n  {#each slides as slide (slide)}\n    \u003Cdiv>Slide {slide}\u003C\u002Fdiv>\n  {\u002Feach}\n\u003C\u002FBlossomCarousel>\n","svelte",[237,307,308,321,347,361,368,441,451,456,466,486,513,523],{"__ignoreMap":235},[240,309,310,314,318],{"class":242,"line":243},[240,311,313],{"class":312},"sMK4o","\u003C",[240,315,317],{"class":316},"swJcz","script",[240,319,320],{"class":312},">\n",[240,322,324,328,332,335,338,341,344],{"class":242,"line":323},2,[240,325,327],{"class":326},"s7zQu","  import",[240,329,331],{"class":330},"sTEyZ"," BlossomCarousel ",[240,333,334],{"class":326},"from",[240,336,337],{"class":312}," \"",[240,339,340],{"class":249},"@blossom-carousel\u002Fsvelte",[240,342,343],{"class":312},"\"",[240,345,346],{"class":312},";\n",[240,348,350,352,354,357,359],{"class":242,"line":349},3,[240,351,327],{"class":326},[240,353,337],{"class":312},[240,355,356],{"class":249},"@blossom-carousel\u002Fcore\u002Fstyle.css",[240,358,343],{"class":312},[240,360,346],{"class":312},[240,362,364],{"class":242,"line":363},4,[240,365,367],{"emptyLinePlaceholder":366},true,"\n",[240,369,371,375,378,381,384,387,390,393,396,399,402,406,409,412,416,419,422,425,428,431,434,437,439],{"class":242,"line":370},5,[240,372,374],{"class":373},"spNyl","  const",[240,376,377],{"class":330}," slides ",[240,379,380],{"class":312},"=",[240,382,383],{"class":330}," Array",[240,385,386],{"class":312},".",[240,388,334],{"class":389},"s2Zo4",[240,391,392],{"class":330},"(",[240,394,395],{"class":312},"{",[240,397,398],{"class":316}," length",[240,400,401],{"class":312},":",[240,403,405],{"class":404},"sbssI"," 12",[240,407,408],{"class":312}," },",[240,410,411],{"class":312}," (",[240,413,415],{"class":414},"sHdIc","_",[240,417,418],{"class":312},",",[240,420,421],{"class":414}," index",[240,423,424],{"class":312},")",[240,426,427],{"class":373}," =>",[240,429,430],{"class":330}," index ",[240,432,433],{"class":312},"+",[240,435,436],{"class":404}," 1",[240,438,424],{"class":330},[240,440,346],{"class":312},[240,442,444,447,449],{"class":242,"line":443},6,[240,445,446],{"class":312},"\u003C\u002F",[240,448,317],{"class":316},[240,450,320],{"class":312},[240,452,454],{"class":242,"line":453},7,[240,455,367],{"emptyLinePlaceholder":366},[240,457,459,461,464],{"class":242,"line":458},8,[240,460,313],{"class":312},[240,462,463],{"class":246},"BlossomCarousel",[240,465,320],{"class":312},[240,467,469,472,475,477,480,483],{"class":242,"line":468},9,[240,470,471],{"class":312},"  {#",[240,473,474],{"class":326},"each",[240,476,377],{"class":330},[240,478,479],{"class":326},"as",[240,481,482],{"class":330}," slide (slide)",[240,484,485],{"class":312},"}\n",[240,487,489,492,495,498,501,503,506,509,511],{"class":242,"line":488},10,[240,490,491],{"class":312},"    \u003C",[240,493,494],{"class":316},"div",[240,496,497],{"class":312},">",[240,499,500],{"class":330},"Slide ",[240,502,395],{"class":312},[240,504,505],{"class":330},"slide",[240,507,508],{"class":312},"}\u003C\u002F",[240,510,494],{"class":316},[240,512,320],{"class":312},[240,514,516,519,521],{"class":242,"line":515},11,[240,517,518],{"class":312},"  {\u002F",[240,520,474],{"class":326},[240,522,485],{"class":312},[240,524,526,528,530],{"class":242,"line":525},12,[240,527,446],{"class":312},[240,529,463],{"class":246},[240,531,320],{"class":312},[221,533,535],{"id":534},"sveltekit-setup","SvelteKit setup",[537,538,539],"p",{},"Import the core stylesheet from the root layout.",[229,541,544],{"className":303,"code":542,"filename":543,"language":305,"meta":235,"style":235},"\u003Cscript>\n  import \"@blossom-carousel\u002Fcore\u002Fstyle.css\";\n\u003C\u002Fscript>\n\n\u003Cslot \u002F>\n","src\u002Froutes\u002F+layout.svelte",[237,545,546,554,566,574,578],{"__ignoreMap":235},[240,547,548,550,552],{"class":242,"line":243},[240,549,313],{"class":312},[240,551,317],{"class":316},[240,553,320],{"class":312},[240,555,556,558,560,562,564],{"class":242,"line":323},[240,557,327],{"class":326},[240,559,337],{"class":312},[240,561,356],{"class":249},[240,563,343],{"class":312},[240,565,346],{"class":312},[240,567,568,570,572],{"class":242,"line":349},[240,569,446],{"class":312},[240,571,317],{"class":316},[240,573,320],{"class":312},[240,575,576],{"class":242,"line":363},[240,577,367],{"emptyLinePlaceholder":366},[240,579,580,582,585],{"class":242,"line":370},[240,581,313],{"class":312},[240,583,584],{"class":326},"slot",[240,586,587],{"class":312}," \u002F>\n",[537,589,590],{},"Then import the component in the page or component that renders the carousel.",[229,592,594],{"className":303,"code":593,"language":305,"meta":235,"style":235},"\u003Cscript>\n  import BlossomCarousel from \"@blossom-carousel\u002Fsvelte\";\n\u003C\u002Fscript>\n\n\u003CBlossomCarousel>{\u002F* slides *\u002F}\u003C\u002FBlossomCarousel>\n",[237,595,596,604,620,628,632],{"__ignoreMap":235},[240,597,598,600,602],{"class":242,"line":243},[240,599,313],{"class":312},[240,601,317],{"class":316},[240,603,320],{"class":312},[240,605,606,608,610,612,614,616,618],{"class":242,"line":323},[240,607,327],{"class":326},[240,609,331],{"class":330},[240,611,334],{"class":326},[240,613,337],{"class":312},[240,615,340],{"class":249},[240,617,343],{"class":312},[240,619,346],{"class":312},[240,621,622,624,626],{"class":242,"line":349},[240,623,446],{"class":312},[240,625,317],{"class":316},[240,627,320],{"class":312},[240,629,630],{"class":242,"line":363},[240,631,367],{"emptyLinePlaceholder":366},[240,633,634,636,638,641,644,646,648],{"class":242,"line":370},[240,635,313],{"class":312},[240,637,463],{"class":246},[240,639,640],{"class":312},">{\u002F",[240,642,643],{"class":330},"* slides *\u002F",[240,645,508],{"class":312},[240,647,463],{"class":246},[240,649,320],{"class":312},[221,651,653],{"id":652},"semantic-root-element","Semantic root element",[229,655,657],{"className":303,"code":656,"language":305,"meta":235,"style":235},"\u003CBlossomCarousel as=\"ul\">\n  {#each slides as slide (slide)}\n    \u003Cli>Slide {slide}\u003C\u002Fli>\n  {\u002Feach}\n\u003C\u002FBlossomCarousel>\n",[237,658,659,679,693,714,722],{"__ignoreMap":235},[240,660,661,663,665,668,670,672,675,677],{"class":242,"line":243},[240,662,313],{"class":312},[240,664,463],{"class":246},[240,666,667],{"class":373}," as",[240,669,380],{"class":312},[240,671,343],{"class":312},[240,673,674],{"class":249},"ul",[240,676,343],{"class":312},[240,678,320],{"class":312},[240,680,681,683,685,687,689,691],{"class":242,"line":323},[240,682,471],{"class":312},[240,684,474],{"class":326},[240,686,377],{"class":330},[240,688,479],{"class":326},[240,690,482],{"class":330},[240,692,485],{"class":312},[240,694,695,697,700,702,704,706,708,710,712],{"class":242,"line":349},[240,696,491],{"class":312},[240,698,699],{"class":316},"li",[240,701,497],{"class":312},[240,703,500],{"class":330},[240,705,395],{"class":312},[240,707,505],{"class":330},[240,709,508],{"class":312},[240,711,699],{"class":316},[240,713,320],{"class":312},[240,715,716,718,720],{"class":242,"line":363},[240,717,518],{"class":312},[240,719,474],{"class":326},[240,721,485],{"class":312},[240,723,724,726,728],{"class":242,"line":370},[240,725,446],{"class":312},[240,727,463],{"class":246},[240,729,320],{"class":312},[221,731,733],{"id":732},"button-controls","Button controls",[537,735,736,737,740,741,386],{},"Navigate the carousel programmatically with ",[237,738,739],{},"prev()"," and ",[237,742,743],{},"next()",[229,745,747],{"className":303,"code":746,"language":305,"meta":235,"style":235},"\u003Cscript>\n  import BlossomCarousel from \"@blossom-carousel\u002Fsvelte\";\n\n  let blossomCarousel;\n\u003C\u002Fscript>\n\n\u003CBlossomCarousel bind:this={blossomCarousel}>\n  \u003C!-- slides -->\n\u003C\u002FBlossomCarousel>\n\n\u003Cbutton onclick={() => blossomCarousel.prev()}>Prev\u003C\u002Fbutton>\n\u003Cbutton onclick={() => blossomCarousel.next()}>Next\u003C\u002Fbutton>\n",[237,748,749,757,773,777,787,795,799,822,828,836,840,877],{"__ignoreMap":235},[240,750,751,753,755],{"class":242,"line":243},[240,752,313],{"class":312},[240,754,317],{"class":316},[240,756,320],{"class":312},[240,758,759,761,763,765,767,769,771],{"class":242,"line":323},[240,760,327],{"class":326},[240,762,331],{"class":330},[240,764,334],{"class":326},[240,766,337],{"class":312},[240,768,340],{"class":249},[240,770,343],{"class":312},[240,772,346],{"class":312},[240,774,775],{"class":242,"line":349},[240,776,367],{"emptyLinePlaceholder":366},[240,778,779,782,785],{"class":242,"line":363},[240,780,781],{"class":373},"  let",[240,783,784],{"class":330}," blossomCarousel",[240,786,346],{"class":312},[240,788,789,791,793],{"class":242,"line":370},[240,790,446],{"class":312},[240,792,317],{"class":316},[240,794,320],{"class":312},[240,796,797],{"class":242,"line":443},[240,798,367],{"emptyLinePlaceholder":366},[240,800,801,803,805,808,810,813,816,819],{"class":242,"line":453},[240,802,313],{"class":312},[240,804,463],{"class":246},[240,806,807],{"class":326}," bind",[240,809,401],{"class":312},[240,811,812],{"class":330},"this",[240,814,815],{"class":312},"={",[240,817,818],{"class":330},"blossomCarousel",[240,820,821],{"class":312},"}>\n",[240,823,824],{"class":242,"line":458},[240,825,827],{"class":826},"sHwdD","  \u003C!-- slides -->\n",[240,829,830,832,834],{"class":242,"line":468},[240,831,446],{"class":312},[240,833,463],{"class":246},[240,835,320],{"class":312},[240,837,838],{"class":242,"line":488},[240,839,367],{"emptyLinePlaceholder":366},[240,841,842,844,847,850,853,855,857,859,862,865,868,871,873,875],{"class":242,"line":515},[240,843,313],{"class":312},[240,845,846],{"class":316},"button",[240,848,849],{"class":373}," onclick",[240,851,852],{"class":312},"={()",[240,854,427],{"class":373},[240,856,784],{"class":330},[240,858,386],{"class":312},[240,860,861],{"class":389},"prev",[240,863,864],{"class":330},"()",[240,866,867],{"class":312},"}>",[240,869,870],{"class":330},"Prev",[240,872,446],{"class":312},[240,874,846],{"class":316},[240,876,320],{"class":312},[240,878,879,881,883,885,887,889,891,893,896,898,900,903,905,907],{"class":242,"line":525},[240,880,313],{"class":312},[240,882,846],{"class":316},[240,884,849],{"class":373},[240,886,852],{"class":312},[240,888,427],{"class":373},[240,890,784],{"class":330},[240,892,386],{"class":312},[240,894,895],{"class":389},"next",[240,897,864],{"class":330},[240,899,867],{"class":312},[240,901,902],{"class":330},"Next",[240,904,446],{"class":312},[240,906,846],{"class":316},[240,908,320],{"class":312},[221,910,912],{"id":911},"overscroll-api","Overscroll API",[537,914,915],{},"Tap into Blossom's drag engine's overscroll behavior to create your own style.",[229,917,919],{"className":303,"code":918,"language":305,"meta":235,"style":235},"\u003Cscript>\n  let blossomCarousel;\n\n  function onOverscroll(event) {\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?.children ?? []).forEach((slide) => {\n      slide.style.transform = `scale(${1 - overScroll * 0.1})`;\n    });\n  }\n\u003C\u002Fscript>\n\n\u003CBlossomCarousel bind:this={blossomCarousel} on:overscroll={onOverscroll}>\n  {#each Array.from({ length: 12 }, (_, index) => index + 1) as slide (slide)}\n    \u003Cdiv>Slide {slide}\u003C\u002Fdiv>\n  {\u002Feach}\n\u003C\u002FBlossomCarousel>\n",[237,920,921,929,937,941,959,964,978,982,1008,1012,1054,1105,1114,1120,1129,1134,1169,1221,1242,1251],{"__ignoreMap":235},[240,922,923,925,927],{"class":242,"line":243},[240,924,313],{"class":312},[240,926,317],{"class":316},[240,928,320],{"class":312},[240,930,931,933,935],{"class":242,"line":323},[240,932,781],{"class":373},[240,934,784],{"class":330},[240,936,346],{"class":312},[240,938,939],{"class":242,"line":349},[240,940,367],{"emptyLinePlaceholder":366},[240,942,943,946,949,951,954,956],{"class":242,"line":363},[240,944,945],{"class":373},"  function",[240,947,948],{"class":389}," onOverscroll",[240,950,392],{"class":312},[240,952,953],{"class":414},"event",[240,955,424],{"class":312},[240,957,958],{"class":312}," {\n",[240,960,961],{"class":242,"line":370},[240,962,963],{"class":826},"    \u002F\u002F prevent and overwrite Blossom's default rubberbanding effect\n",[240,965,966,969,971,974,976],{"class":242,"line":443},[240,967,968],{"class":330},"    event",[240,970,386],{"class":312},[240,972,973],{"class":389},"preventDefault",[240,975,864],{"class":316},[240,977,346],{"class":312},[240,979,980],{"class":242,"line":453},[240,981,367],{"emptyLinePlaceholder":366},[240,983,984,987,990,993,996,998,1001,1003,1006],{"class":242,"line":458},[240,985,986],{"class":373},"    const",[240,988,989],{"class":330}," overScroll",[240,991,992],{"class":312}," =",[240,994,995],{"class":330}," event",[240,997,386],{"class":312},[240,999,1000],{"class":330},"detail",[240,1002,386],{"class":312},[240,1004,1005],{"class":330},"left",[240,1007,346],{"class":312},[240,1009,1010],{"class":242,"line":468},[240,1011,367],{"emptyLinePlaceholder":366},[240,1013,1014,1017,1019,1021,1023,1025,1028,1031,1034,1037,1039,1042,1044,1046,1048,1050,1052],{"class":242,"line":488},[240,1015,1016],{"class":330},"    Array",[240,1018,386],{"class":312},[240,1020,334],{"class":389},[240,1022,392],{"class":316},[240,1024,818],{"class":330},[240,1026,1027],{"class":312},"?.",[240,1029,1030],{"class":330},"children",[240,1032,1033],{"class":312}," ??",[240,1035,1036],{"class":316}," [])",[240,1038,386],{"class":312},[240,1040,1041],{"class":389},"forEach",[240,1043,392],{"class":316},[240,1045,392],{"class":312},[240,1047,505],{"class":414},[240,1049,424],{"class":312},[240,1051,427],{"class":373},[240,1053,958],{"class":312},[240,1055,1056,1059,1061,1064,1066,1069,1071,1074,1077,1080,1083,1086,1089,1092,1095,1098,1100,1103],{"class":242,"line":515},[240,1057,1058],{"class":330},"      slide",[240,1060,386],{"class":312},[240,1062,1063],{"class":330},"style",[240,1065,386],{"class":312},[240,1067,1068],{"class":330},"transform",[240,1070,992],{"class":312},[240,1072,1073],{"class":312}," `",[240,1075,1076],{"class":249},"scale(",[240,1078,1079],{"class":312},"${",[240,1081,1082],{"class":404},"1",[240,1084,1085],{"class":312}," -",[240,1087,1088],{"class":330}," overScroll ",[240,1090,1091],{"class":312},"*",[240,1093,1094],{"class":404}," 0.1",[240,1096,1097],{"class":312},"}",[240,1099,424],{"class":249},[240,1101,1102],{"class":312},"`",[240,1104,346],{"class":312},[240,1106,1107,1110,1112],{"class":242,"line":525},[240,1108,1109],{"class":312},"    }",[240,1111,424],{"class":316},[240,1113,346],{"class":312},[240,1115,1117],{"class":242,"line":1116},13,[240,1118,1119],{"class":312},"  }\n",[240,1121,1123,1125,1127],{"class":242,"line":1122},14,[240,1124,446],{"class":312},[240,1126,317],{"class":316},[240,1128,320],{"class":312},[240,1130,1132],{"class":242,"line":1131},15,[240,1133,367],{"emptyLinePlaceholder":366},[240,1135,1137,1139,1141,1143,1145,1147,1149,1151,1154,1157,1159,1162,1164,1167],{"class":242,"line":1136},16,[240,1138,313],{"class":312},[240,1140,463],{"class":246},[240,1142,807],{"class":326},[240,1144,401],{"class":312},[240,1146,812],{"class":330},[240,1148,815],{"class":312},[240,1150,818],{"class":330},[240,1152,1153],{"class":312},"} ",[240,1155,1156],{"class":326},"on",[240,1158,401],{"class":312},[240,1160,1161],{"class":246},"overscroll",[240,1163,815],{"class":312},[240,1165,1166],{"class":330},"onOverscroll",[240,1168,821],{"class":312},[240,1170,1172,1174,1176,1178,1180,1182,1184,1186,1188,1190,1192,1194,1196,1198,1200,1202,1204,1206,1208,1210,1212,1215,1217,1219],{"class":242,"line":1171},17,[240,1173,471],{"class":312},[240,1175,474],{"class":326},[240,1177,383],{"class":330},[240,1179,386],{"class":312},[240,1181,334],{"class":389},[240,1183,392],{"class":330},[240,1185,395],{"class":312},[240,1187,398],{"class":316},[240,1189,401],{"class":312},[240,1191,405],{"class":404},[240,1193,408],{"class":312},[240,1195,411],{"class":312},[240,1197,415],{"class":414},[240,1199,418],{"class":312},[240,1201,421],{"class":414},[240,1203,424],{"class":312},[240,1205,427],{"class":373},[240,1207,430],{"class":330},[240,1209,433],{"class":312},[240,1211,436],{"class":404},[240,1213,1214],{"class":330},") ",[240,1216,479],{"class":326},[240,1218,482],{"class":330},[240,1220,485],{"class":312},[240,1222,1224,1226,1228,1230,1232,1234,1236,1238,1240],{"class":242,"line":1223},18,[240,1225,491],{"class":312},[240,1227,494],{"class":316},[240,1229,497],{"class":312},[240,1231,500],{"class":330},[240,1233,395],{"class":312},[240,1235,505],{"class":330},[240,1237,508],{"class":312},[240,1239,494],{"class":316},[240,1241,320],{"class":312},[240,1243,1245,1247,1249],{"class":242,"line":1244},19,[240,1246,518],{"class":312},[240,1248,474],{"class":326},[240,1250,485],{"class":312},[240,1252,1254,1256,1258],{"class":242,"line":1253},20,[240,1255,446],{"class":312},[240,1257,463],{"class":246},[240,1259,320],{"class":312},[1063,1261,1262],{},"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .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 .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":323,"depth":323,"links":1264},[1265,1266,1267,1268,1269,1270],{"id":223,"depth":323,"text":224},{"id":299,"depth":323,"text":300},{"id":534,"depth":323,"text":535},{"id":652,"depth":323,"text":653},{"id":732,"depth":323,"text":733},{"id":911,"depth":323,"text":912},"Use Blossom Carousel in Svelte and SvelteKit with keyed each blocks and global stylesheet imports.","md",null,{},{"icon":39},{"title":1277,"description":1278},"Svelte carousel component for Blossom Carousel and SvelteKit","Install and use the Blossom Carousel Svelte component in Svelte and SvelteKit with native scrolling and CSS-first layouts.","PJtn3M8YMeQmfBWSkdtP-BGeWo9YWaf2er2408GEPUw",[1281,1283],{"title":31,"path":32,"stem":33,"description":1282,"icon":34,"children":-1},"Use Blossom Carousel in React and Next.js apps with tsx, global styles, and semantic root elements.",{"title":41,"path":42,"stem":43,"description":1284,"icon":44,"children":-1},"Use Blossom Carousel as a framework-free custom element with package imports or a CDN build.",1780251481875]