[{"data":1,"prerenderedAt":3236},["ShallowReactive",2],{"navigation_docs":3,"-docs-migration-guides-slick":215,"-docs-migration-guides-slick-surround":3231},[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":206,"body":217,"description":3222,"extension":3223,"links":3224,"meta":3225,"navigation":3226,"path":207,"seo":3227,"stem":208,"__hash__":3230},"docs\u002Fdocs\u002F6.migration-guides\u002F4.slick.md",{"type":218,"value":219,"toc":3210},"minimark",[220,224,227,232,235,268,274,277,280,401,404,430,434,437,1825,1829,1832,1997,2000,2120,2123,2309,2313,2321,2429,2432,2508,2512,2519,2531,2918,2922,2925,3012,3015,3019,3022,3025,3121,3125,3175,3179,3206],[221,222,223],"p",{},"Slick Carousel creates a carousel around jQuery-managed markup, cloned slides, option objects, generated controls, and event callbacks. React Slick wraps the same model in React components.",[221,225,226],{},"Blossom keeps the carousel as a native scroll container. Layout, slide sizing, gaps, breakpoints, and snapping belong in CSS, while Blossom adds dragging and small convenience methods.",[228,229,231],"h2",{"id":230},"migration-mindset","Migration mindset",[221,233,234],{},"When moving from Slick Carousel to Blossom, migrate the carousel in three steps:",[236,237,238,247,265],"ol",{},[239,240,241,242,246],"li",{},"Replace Slick's generated track\u002Flist structure with a single ",[243,244,245],"code",{},"\u003CBlossomCarousel>"," root and direct children.",[239,248,249,250,253,254,253,257,260,261,264],{},"Move Slick options such as ",[243,251,252],{},"slidesToShow",", ",[243,255,256],{},"slidesToScroll",[243,258,259],{},"centerMode",", and ",[243,262,263],{},"responsive"," into CSS.",[239,266,267],{},"Replace Slick method calls and events with Blossom methods, native scroll APIs, and browser observers.",[269,270,273],"note",{"color":271,"icon":272},"primary","i-lucide-lightbulb","Slick often adds hidden markup and cloned slides. With Blossom, your source markup is the carousel markup.",[228,275,16],{"id":276},"installation",[221,278,279],{},"Remove Slick packages and install the matching Blossom package for your framework.",[281,282,284,324,350,377],"code-group",{"sync":283},"migration-code-style",[285,286,292],"pre",{"className":287,"code":288,"filename":289,"language":290,"meta":291,"style":291},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm uninstall vue-slick-carousel slick-carousel\nnpm install @blossom-carousel\u002Fvue\n","Vue","bash","",[243,293,294,313],{"__ignoreMap":291},[295,296,299,303,307,310],"span",{"class":297,"line":298},"line",1,[295,300,302],{"class":301},"sBMFI","npm",[295,304,306],{"class":305},"sfazB"," uninstall",[295,308,309],{"class":305}," vue-slick-carousel",[295,311,312],{"class":305}," slick-carousel\n",[295,314,316,318,321],{"class":297,"line":315},2,[295,317,302],{"class":301},[295,319,320],{"class":305}," install",[295,322,323],{"class":305}," @blossom-carousel\u002Fvue\n",[285,325,328],{"className":287,"code":326,"filename":327,"language":290,"meta":291,"style":291},"npm uninstall react-slick slick-carousel\nnpm install @blossom-carousel\u002Freact\n","React",[243,329,330,341],{"__ignoreMap":291},[295,331,332,334,336,339],{"class":297,"line":298},[295,333,302],{"class":301},[295,335,306],{"class":305},[295,337,338],{"class":305}," react-slick",[295,340,312],{"class":305},[295,342,343,345,347],{"class":297,"line":315},[295,344,302],{"class":301},[295,346,320],{"class":305},[295,348,349],{"class":305}," @blossom-carousel\u002Freact\n",[285,351,354],{"className":287,"code":352,"filename":353,"language":290,"meta":291,"style":291},"npm uninstall slick-carousel jquery\nnpm install @blossom-carousel\u002Fsvelte\n","Svelte",[243,355,356,368],{"__ignoreMap":291},[295,357,358,360,362,365],{"class":297,"line":298},[295,359,302],{"class":301},[295,361,306],{"class":305},[295,363,364],{"class":305}," slick-carousel",[295,366,367],{"class":305}," jquery\n",[295,369,370,372,374],{"class":297,"line":315},[295,371,302],{"class":301},[295,373,320],{"class":305},[295,375,376],{"class":305}," @blossom-carousel\u002Fsvelte\n",[285,378,380],{"className":287,"code":379,"filename":46,"language":290,"meta":291,"style":291},"npm uninstall slick-carousel jquery\nnpm install @blossom-carousel\u002Fcore\n",[243,381,382,392],{"__ignoreMap":291},[295,383,384,386,388,390],{"class":297,"line":298},[295,385,302],{"class":301},[295,387,306],{"class":305},[295,389,364],{"class":305},[295,391,367],{"class":305},[295,393,394,396,398],{"class":297,"line":315},[295,395,302],{"class":301},[295,397,320],{"class":305},[295,399,400],{"class":305}," @blossom-carousel\u002Fcore\n",[221,402,403],{},"Import Blossom's core stylesheet once in your app.",[285,405,409],{"className":406,"code":407,"language":408,"meta":291,"style":291},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import \"@blossom-carousel\u002Fcore\u002Fstyle.css\";\n","js",[243,410,411],{"__ignoreMap":291},[295,412,413,417,421,424,427],{"class":297,"line":298},[295,414,416],{"class":415},"s7zQu","import",[295,418,420],{"class":419},"sMK4o"," \"",[295,422,423],{"class":305},"@blossom-carousel\u002Fcore\u002Fstyle.css",[295,425,426],{"class":419},"\"",[295,428,429],{"class":419},";\n",[228,431,433],{"id":432},"component-structure","Component structure",[221,435,436],{},"Slick and React Slick wrap your slides in a generated list and track. Blossom uses one scroll container with direct slide children.",[281,438,439,848,1166,1628],{"sync":283},[285,440,444],{"className":441,"code":442,"filename":289,"language":443,"meta":291,"style":291},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight has-diff","\u003Cscript setup lang=\"ts\">\nimport VueSlickCarousel from \"vue-slick-carousel\"; \u002F\u002F [!code --]\nimport \"vue-slick-carousel\u002Fdist\u002Fvue-slick-carousel.css\"; \u002F\u002F [!code --]\nimport { BlossomCarousel } from \"@blossom-carousel\u002Fvue\"; \u002F\u002F [!code ++]\nimport \"@blossom-carousel\u002Fcore\u002Fstyle.css\"; \u002F\u002F [!code ++]\n\nconst slickSettings = { slidesToShow: 4, slidesToScroll: 1 }; \u002F\u002F [!code --]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVueSlickCarousel v-bind=\"slickSettings\"> \u003C!-- [!code --] -->\n    \u003Cdiv>Slide 1\u003C\u002Fdiv> \u003C!-- [!code --] -->\n    \u003Cdiv>Slide 2\u003C\u002Fdiv> \u003C!-- [!code --] -->\n    \u003Cdiv>Slide 3\u003C\u002Fdiv> \u003C!-- [!code --] -->\n  \u003C\u002FVueSlickCarousel> \u003C!-- [!code --] -->\n  \u003CBlossomCarousel class=\"carousel grid! grid-auto-cols grid-cols-[calc((100% - 3rem) \u002F 4)] gap-4\"> \u003C!-- [!code ++] -->\n    \u003Cdiv class=\"slide snap-start\">Slide 1\u003C\u002Fdiv> \u003C!-- [!code ++] -->\n    \u003Cdiv class=\"slide snap-start\">Slide 2\u003C\u002Fdiv> \u003C!-- [!code ++] -->\n    \u003Cdiv class=\"slide snap-start\">Slide 3\u003C\u002Fdiv> \u003C!-- [!code ++] -->\n  \u003C\u002FBlossomCarousel> \u003C!-- [!code ++] -->\n\u003C\u002Ftemplate>\n","vue",[243,445,446,475,499,514,542,556,563,601,611,616,626,651,672,691,710,721,744,773,801,829,839],{"__ignoreMap":291},[295,447,448,451,455,459,462,465,467,470,472],{"class":297,"line":298},[295,449,450],{"class":419},"\u003C",[295,452,454],{"class":453},"swJcz","script",[295,456,458],{"class":457},"spNyl"," setup",[295,460,461],{"class":457}," lang",[295,463,464],{"class":419},"=",[295,466,426],{"class":419},[295,468,469],{"class":305},"ts",[295,471,426],{"class":419},[295,473,474],{"class":419},">\n",[295,476,480,482,486,489,491,494,496],{"class":477,"line":315},[297,478,479],"diff","remove",[295,481,416],{"class":415},[295,483,485],{"class":484},"sTEyZ"," VueSlickCarousel ",[295,487,488],{"class":415},"from",[295,490,420],{"class":419},[295,492,493],{"class":305},"vue-slick-carousel",[295,495,426],{"class":419},[295,497,498],{"class":419},";",[295,500,503,505,507,510,512],{"class":501,"line":502},[297,478,479],3,[295,504,416],{"class":415},[295,506,420],{"class":419},[295,508,509],{"class":305},"vue-slick-carousel\u002Fdist\u002Fvue-slick-carousel.css",[295,511,426],{"class":419},[295,513,498],{"class":419},[295,515,519,521,524,527,530,533,535,538,540],{"class":516,"line":518},[297,478,517],"add",4,[295,520,416],{"class":415},[295,522,523],{"class":419}," {",[295,525,526],{"class":484}," BlossomCarousel",[295,528,529],{"class":419}," }",[295,531,532],{"class":415}," from",[295,534,420],{"class":419},[295,536,537],{"class":305},"@blossom-carousel\u002Fvue",[295,539,426],{"class":419},[295,541,498],{"class":419},[295,543,546,548,550,552,554],{"class":544,"line":545},[297,478,517],5,[295,547,416],{"class":415},[295,549,420],{"class":419},[295,551,423],{"class":305},[295,553,426],{"class":419},[295,555,498],{"class":419},[295,557,559],{"class":297,"line":558},6,[295,560,562],{"emptyLinePlaceholder":561},true,"\n",[295,564,567,570,573,575,577,580,583,587,590,593,595,598],{"class":565,"line":566},[297,478,479],7,[295,568,569],{"class":457},"const",[295,571,572],{"class":484}," slickSettings ",[295,574,464],{"class":419},[295,576,523],{"class":419},[295,578,579],{"class":453}," slidesToShow",[295,581,582],{"class":419},":",[295,584,586],{"class":585},"sbssI"," 4",[295,588,589],{"class":419},",",[295,591,592],{"class":453}," slidesToScroll",[295,594,582],{"class":419},[295,596,597],{"class":585}," 1",[295,599,600],{"class":419}," };",[295,602,604,607,609],{"class":297,"line":603},8,[295,605,606],{"class":419},"\u003C\u002F",[295,608,454],{"class":453},[295,610,474],{"class":419},[295,612,614],{"class":297,"line":613},9,[295,615,562],{"emptyLinePlaceholder":561},[295,617,619,621,624],{"class":297,"line":618},10,[295,620,450],{"class":419},[295,622,623],{"class":453},"template",[295,625,474],{"class":419},[295,627,630,633,636,639,641,643,646,648],{"class":628,"line":629},[297,478,479],11,[295,631,632],{"class":419},"  \u003C",[295,634,635],{"class":453},"VueSlickCarousel",[295,637,638],{"class":457}," v-bind",[295,640,464],{"class":419},[295,642,426],{"class":419},[295,644,645],{"class":305},"slickSettings",[295,647,426],{"class":419},[295,649,650],{"class":419},">",[295,652,655,658,661,663,666,668,670],{"class":653,"line":654},[297,478,479],12,[295,656,657],{"class":419},"    \u003C",[295,659,660],{"class":453},"div",[295,662,650],{"class":419},[295,664,665],{"class":484},"Slide 1",[295,667,606],{"class":419},[295,669,660],{"class":453},[295,671,650],{"class":419},[295,673,676,678,680,682,685,687,689],{"class":674,"line":675},[297,478,479],13,[295,677,657],{"class":419},[295,679,660],{"class":453},[295,681,650],{"class":419},[295,683,684],{"class":484},"Slide 2",[295,686,606],{"class":419},[295,688,660],{"class":453},[295,690,650],{"class":419},[295,692,695,697,699,701,704,706,708],{"class":693,"line":694},[297,478,479],14,[295,696,657],{"class":419},[295,698,660],{"class":453},[295,700,650],{"class":419},[295,702,703],{"class":484},"Slide 3",[295,705,606],{"class":419},[295,707,660],{"class":453},[295,709,650],{"class":419},[295,711,714,717,719],{"class":712,"line":713},[297,478,479],15,[295,715,716],{"class":419},"  \u003C\u002F",[295,718,635],{"class":453},[295,720,650],{"class":419},[295,722,725,727,730,733,735,737,740,742],{"class":723,"line":724},[297,478,517],16,[295,726,632],{"class":419},[295,728,729],{"class":453},"BlossomCarousel",[295,731,732],{"class":457}," class",[295,734,464],{"class":419},[295,736,426],{"class":419},[295,738,739],{"class":305},"carousel grid! grid-auto-cols grid-cols-[calc((100% - 3rem) \u002F 4)] gap-4",[295,741,426],{"class":419},[295,743,650],{"class":419},[295,745,748,750,752,754,756,758,761,763,765,767,769,771],{"class":746,"line":747},[297,478,517],17,[295,749,657],{"class":419},[295,751,660],{"class":453},[295,753,732],{"class":457},[295,755,464],{"class":419},[295,757,426],{"class":419},[295,759,760],{"class":305},"slide snap-start",[295,762,426],{"class":419},[295,764,650],{"class":419},[295,766,665],{"class":484},[295,768,606],{"class":419},[295,770,660],{"class":453},[295,772,650],{"class":419},[295,774,777,779,781,783,785,787,789,791,793,795,797,799],{"class":775,"line":776},[297,478,517],18,[295,778,657],{"class":419},[295,780,660],{"class":453},[295,782,732],{"class":457},[295,784,464],{"class":419},[295,786,426],{"class":419},[295,788,760],{"class":305},[295,790,426],{"class":419},[295,792,650],{"class":419},[295,794,684],{"class":484},[295,796,606],{"class":419},[295,798,660],{"class":453},[295,800,650],{"class":419},[295,802,805,807,809,811,813,815,817,819,821,823,825,827],{"class":803,"line":804},[297,478,517],19,[295,806,657],{"class":419},[295,808,660],{"class":453},[295,810,732],{"class":457},[295,812,464],{"class":419},[295,814,426],{"class":419},[295,816,760],{"class":305},[295,818,426],{"class":419},[295,820,650],{"class":419},[295,822,703],{"class":484},[295,824,606],{"class":419},[295,826,660],{"class":453},[295,828,650],{"class":419},[295,830,833,835,837],{"class":831,"line":832},[297,478,517],20,[295,834,716],{"class":419},[295,836,729],{"class":453},[295,838,650],{"class":419},[295,840,842,844,846],{"class":297,"line":841},21,[295,843,606],{"class":419},[295,845,623],{"class":453},[295,847,474],{"class":419},[285,849,853],{"className":850,"code":851,"filename":327,"language":852,"meta":291,"style":291},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight has-diff","import Slider from \"react-slick\"; \u002F\u002F [!code --]\nimport \"slick-carousel\u002Fslick\u002Fslick.css\"; \u002F\u002F [!code --]\nimport { BlossomCarousel } from \"@blossom-carousel\u002Freact\"; \u002F\u002F [!code ++]\nimport \"@blossom-carousel\u002Fcore\u002Fstyle.css\"; \u002F\u002F [!code ++]\n\nexport function Carousel() {\n  return (\n    \u003CSlider slidesToShow={4} slidesToScroll={1}> {\u002F* [!code --] *\u002F}\n      \u003Cdiv>Slide 1\u003C\u002Fdiv> {\u002F* [!code --] *\u002F}\n      \u003Cdiv>Slide 2\u003C\u002Fdiv> {\u002F* [!code --] *\u002F}\n      \u003Cdiv>Slide 3\u003C\u002Fdiv> {\u002F* [!code --] *\u002F}\n    \u003C\u002FSlider> {\u002F* [!code --] *\u002F}\n    \u003CBlossomCarousel className=\"carousel grid! grid-auto-cols grid-cols-[calc((100% - 3rem) \u002F 4)] gap-4\"> {\u002F* [!code ++] *\u002F}\n      \u003Cdiv className=\"slide snap-start\">Slide 1\u003C\u002Fdiv> {\u002F* [!code ++] *\u002F}\n      \u003Cdiv className=\"slide snap-start\">Slide 2\u003C\u002Fdiv> {\u002F* [!code ++] *\u002F}\n      \u003Cdiv className=\"slide snap-start\">Slide 3\u003C\u002Fdiv> {\u002F* [!code ++] *\u002F}\n    \u003C\u002FBlossomCarousel> {\u002F* [!code ++] *\u002F}\n  );\n}\n","tsx",[243,854,855,874,888,910,923,927,945,953,982,1000,1017,1034,1044,1064,1091,1118,1145,1154,1161],{"__ignoreMap":291},[295,856,858,860,863,865,867,870,872],{"class":857,"line":298},[297,478,479],[295,859,416],{"class":415},[295,861,862],{"class":484}," Slider ",[295,864,488],{"class":415},[295,866,420],{"class":419},[295,868,869],{"class":305},"react-slick",[295,871,426],{"class":419},[295,873,498],{"class":419},[295,875,877,879,881,884,886],{"class":876,"line":315},[297,478,479],[295,878,416],{"class":415},[295,880,420],{"class":419},[295,882,883],{"class":305},"slick-carousel\u002Fslick\u002Fslick.css",[295,885,426],{"class":419},[295,887,498],{"class":419},[295,889,891,893,895,897,899,901,903,906,908],{"class":890,"line":502},[297,478,517],[295,892,416],{"class":415},[295,894,523],{"class":419},[295,896,526],{"class":484},[295,898,529],{"class":419},[295,900,532],{"class":415},[295,902,420],{"class":419},[295,904,905],{"class":305},"@blossom-carousel\u002Freact",[295,907,426],{"class":419},[295,909,498],{"class":419},[295,911,913,915,917,919,921],{"class":912,"line":518},[297,478,517],[295,914,416],{"class":415},[295,916,420],{"class":419},[295,918,423],{"class":305},[295,920,426],{"class":419},[295,922,498],{"class":419},[295,924,925],{"class":297,"line":545},[295,926,562],{"emptyLinePlaceholder":561},[295,928,929,932,935,939,942],{"class":297,"line":558},[295,930,931],{"class":415},"export",[295,933,934],{"class":457}," function",[295,936,938],{"class":937},"s2Zo4"," Carousel",[295,940,941],{"class":419},"()",[295,943,944],{"class":419}," {\n",[295,946,947,950],{"class":297,"line":566},[295,948,949],{"class":415},"  return",[295,951,952],{"class":453}," (\n",[295,954,956,958,961,963,966,969,972,974,976,979],{"class":955,"line":603},[297,478,479],[295,957,657],{"class":419},[295,959,960],{"class":301},"Slider",[295,962,579],{"class":457},[295,964,965],{"class":419},"={",[295,967,968],{"class":585},"4",[295,970,971],{"class":419},"} ",[295,973,256],{"class":457},[295,975,965],{"class":419},[295,977,978],{"class":585},"1",[295,980,981],{"class":419},"}>",[295,983,985,988,990,992,994,996,998],{"class":984,"line":613},[297,478,479],[295,986,987],{"class":419},"      \u003C",[295,989,660],{"class":453},[295,991,650],{"class":419},[295,993,665],{"class":484},[295,995,606],{"class":419},[295,997,660],{"class":453},[295,999,650],{"class":419},[295,1001,1003,1005,1007,1009,1011,1013,1015],{"class":1002,"line":618},[297,478,479],[295,1004,987],{"class":419},[295,1006,660],{"class":453},[295,1008,650],{"class":419},[295,1010,684],{"class":484},[295,1012,606],{"class":419},[295,1014,660],{"class":453},[295,1016,650],{"class":419},[295,1018,1020,1022,1024,1026,1028,1030,1032],{"class":1019,"line":629},[297,478,479],[295,1021,987],{"class":419},[295,1023,660],{"class":453},[295,1025,650],{"class":419},[295,1027,703],{"class":484},[295,1029,606],{"class":419},[295,1031,660],{"class":453},[295,1033,650],{"class":419},[295,1035,1037,1040,1042],{"class":1036,"line":654},[297,478,479],[295,1038,1039],{"class":419},"    \u003C\u002F",[295,1041,960],{"class":301},[295,1043,650],{"class":419},[295,1045,1047,1049,1051,1054,1056,1058,1060,1062],{"class":1046,"line":675},[297,478,517],[295,1048,657],{"class":419},[295,1050,729],{"class":301},[295,1052,1053],{"class":457}," className",[295,1055,464],{"class":419},[295,1057,426],{"class":419},[295,1059,739],{"class":305},[295,1061,426],{"class":419},[295,1063,650],{"class":419},[295,1065,1067,1069,1071,1073,1075,1077,1079,1081,1083,1085,1087,1089],{"class":1066,"line":694},[297,478,517],[295,1068,987],{"class":419},[295,1070,660],{"class":453},[295,1072,1053],{"class":457},[295,1074,464],{"class":419},[295,1076,426],{"class":419},[295,1078,760],{"class":305},[295,1080,426],{"class":419},[295,1082,650],{"class":419},[295,1084,665],{"class":484},[295,1086,606],{"class":419},[295,1088,660],{"class":453},[295,1090,650],{"class":419},[295,1092,1094,1096,1098,1100,1102,1104,1106,1108,1110,1112,1114,1116],{"class":1093,"line":713},[297,478,517],[295,1095,987],{"class":419},[295,1097,660],{"class":453},[295,1099,1053],{"class":457},[295,1101,464],{"class":419},[295,1103,426],{"class":419},[295,1105,760],{"class":305},[295,1107,426],{"class":419},[295,1109,650],{"class":419},[295,1111,684],{"class":484},[295,1113,606],{"class":419},[295,1115,660],{"class":453},[295,1117,650],{"class":419},[295,1119,1121,1123,1125,1127,1129,1131,1133,1135,1137,1139,1141,1143],{"class":1120,"line":724},[297,478,517],[295,1122,987],{"class":419},[295,1124,660],{"class":453},[295,1126,1053],{"class":457},[295,1128,464],{"class":419},[295,1130,426],{"class":419},[295,1132,760],{"class":305},[295,1134,426],{"class":419},[295,1136,650],{"class":419},[295,1138,703],{"class":484},[295,1140,606],{"class":419},[295,1142,660],{"class":453},[295,1144,650],{"class":419},[295,1146,1148,1150,1152],{"class":1147,"line":747},[297,478,517],[295,1149,1039],{"class":419},[295,1151,729],{"class":301},[295,1153,650],{"class":419},[295,1155,1156,1159],{"class":297,"line":776},[295,1157,1158],{"class":453},"  )",[295,1160,429],{"class":419},[295,1162,1163],{"class":297,"line":804},[295,1164,1165],{"class":419},"}\n",[285,1167,1171],{"className":1168,"code":1169,"filename":353,"language":1170,"meta":291,"style":291},"language-svelte shiki shiki-themes material-theme-lighter material-theme material-theme-palenight has-diff","\u003Cscript>\n  import { onMount } from \"svelte\"; \u002F\u002F [!code --]\n  import $ from \"jquery\"; \u002F\u002F [!code --]\n  import \"slick-carousel\"; \u002F\u002F [!code --]\n  import \"slick-carousel\u002Fslick\u002Fslick.css\"; \u002F\u002F [!code --]\n  import BlossomCarousel from \"@blossom-carousel\u002Fsvelte\"; \u002F\u002F [!code ++]\n  import \"@blossom-carousel\u002Fcore\u002Fstyle.css\"; \u002F\u002F [!code ++]\n\n  let carousel; \u002F\u002F [!code --]\n\n  onMount(() => { \u002F\u002F [!code --]\n    const slick = $(carousel).slick({ slidesToShow: 4, slidesToScroll: 1 }); \u002F\u002F [!code --]\n    return () => slick.slick(\"unslick\"); \u002F\u002F [!code --]\n  }); \u002F\u002F [!code --]\n\u003C\u002Fscript>\n\n\u003Cdiv class=\"carousel\" bind:this={carousel}> \u003C!-- [!code --] -->\n  \u003Cdiv>Slide 1\u003C\u002Fdiv> \u003C!-- [!code --] -->\n  \u003Cdiv>Slide 2\u003C\u002Fdiv> \u003C!-- [!code --] -->\n  \u003Cdiv>Slide 3\u003C\u002Fdiv> \u003C!-- [!code --] -->\n\u003C\u002Fdiv> \u003C!-- [!code --] -->\n\u003CBlossomCarousel class=\"carousel grid! grid-auto-cols grid-cols-[calc((100% - 3rem) \u002F 4)] gap-4\"> \u003C!-- [!code ++] -->\n  \u003Cdiv class=\"slide snap-start\">Slide 1\u003C\u002Fdiv> \u003C!-- [!code ++] -->\n  \u003Cdiv class=\"slide snap-start\">Slide 2\u003C\u002Fdiv> \u003C!-- [!code ++] -->\n  \u003Cdiv class=\"slide snap-start\">Slide 3\u003C\u002Fdiv> \u003C!-- [!code ++] -->\n\u003C\u002FBlossomCarousel> \u003C!-- [!code ++] -->\n","svelte",[243,1172,1173,1181,1204,1223,1237,1250,1269,1282,1286,1297,1301,1317,1371,1401,1411,1419,1423,1454,1471,1488,1505,1514,1534,1562,1590,1618],{"__ignoreMap":291},[295,1174,1175,1177,1179],{"class":297,"line":298},[295,1176,450],{"class":419},[295,1178,454],{"class":453},[295,1180,474],{"class":419},[295,1182,1184,1187,1189,1192,1194,1196,1198,1200,1202],{"class":1183,"line":315},[297,478,479],[295,1185,1186],{"class":415},"  import",[295,1188,523],{"class":419},[295,1190,1191],{"class":484}," onMount",[295,1193,529],{"class":419},[295,1195,532],{"class":415},[295,1197,420],{"class":419},[295,1199,1170],{"class":305},[295,1201,426],{"class":419},[295,1203,498],{"class":419},[295,1205,1207,1209,1212,1214,1216,1219,1221],{"class":1206,"line":502},[297,478,479],[295,1208,1186],{"class":415},[295,1210,1211],{"class":484}," $ ",[295,1213,488],{"class":415},[295,1215,420],{"class":419},[295,1217,1218],{"class":305},"jquery",[295,1220,426],{"class":419},[295,1222,498],{"class":419},[295,1224,1226,1228,1230,1233,1235],{"class":1225,"line":518},[297,478,479],[295,1227,1186],{"class":415},[295,1229,420],{"class":419},[295,1231,1232],{"class":305},"slick-carousel",[295,1234,426],{"class":419},[295,1236,498],{"class":419},[295,1238,1240,1242,1244,1246,1248],{"class":1239,"line":545},[297,478,479],[295,1241,1186],{"class":415},[295,1243,420],{"class":419},[295,1245,883],{"class":305},[295,1247,426],{"class":419},[295,1249,498],{"class":419},[295,1251,1253,1255,1258,1260,1262,1265,1267],{"class":1252,"line":558},[297,478,517],[295,1254,1186],{"class":415},[295,1256,1257],{"class":484}," BlossomCarousel ",[295,1259,488],{"class":415},[295,1261,420],{"class":419},[295,1263,1264],{"class":305},"@blossom-carousel\u002Fsvelte",[295,1266,426],{"class":419},[295,1268,498],{"class":419},[295,1270,1272,1274,1276,1278,1280],{"class":1271,"line":566},[297,478,517],[295,1273,1186],{"class":415},[295,1275,420],{"class":419},[295,1277,423],{"class":305},[295,1279,426],{"class":419},[295,1281,498],{"class":419},[295,1283,1284],{"class":297,"line":603},[295,1285,562],{"emptyLinePlaceholder":561},[295,1287,1289,1292,1295],{"class":1288,"line":613},[297,478,479],[295,1290,1291],{"class":457},"  let",[295,1293,1294],{"class":484}," carousel",[295,1296,498],{"class":419},[295,1298,1299],{"class":297,"line":618},[295,1300,562],{"emptyLinePlaceholder":561},[295,1302,1304,1307,1310,1312,1315],{"class":1303,"line":629},[297,478,479],[295,1305,1306],{"class":937},"  onMount",[295,1308,1309],{"class":484},"(",[295,1311,941],{"class":419},[295,1313,1314],{"class":457}," =>",[295,1316,523],{"class":419},[295,1318,1320,1323,1326,1329,1332,1334,1337,1340,1343,1346,1348,1351,1353,1355,1357,1359,1361,1363,1365,1367,1369],{"class":1319,"line":654},[297,478,479],[295,1321,1322],{"class":457},"    const",[295,1324,1325],{"class":484}," slick",[295,1327,1328],{"class":419}," =",[295,1330,1331],{"class":937}," $",[295,1333,1309],{"class":453},[295,1335,1336],{"class":484},"carousel",[295,1338,1339],{"class":453},")",[295,1341,1342],{"class":419},".",[295,1344,1345],{"class":937},"slick",[295,1347,1309],{"class":453},[295,1349,1350],{"class":419},"{",[295,1352,579],{"class":453},[295,1354,582],{"class":419},[295,1356,586],{"class":585},[295,1358,589],{"class":419},[295,1360,592],{"class":453},[295,1362,582],{"class":419},[295,1364,597],{"class":585},[295,1366,529],{"class":419},[295,1368,1339],{"class":453},[295,1370,498],{"class":419},[295,1372,1374,1377,1380,1382,1384,1386,1388,1390,1392,1395,1397,1399],{"class":1373,"line":675},[297,478,479],[295,1375,1376],{"class":415},"    return",[295,1378,1379],{"class":419}," ()",[295,1381,1314],{"class":457},[295,1383,1325],{"class":484},[295,1385,1342],{"class":419},[295,1387,1345],{"class":937},[295,1389,1309],{"class":453},[295,1391,426],{"class":419},[295,1393,1394],{"class":305},"unslick",[295,1396,426],{"class":419},[295,1398,1339],{"class":453},[295,1400,498],{"class":419},[295,1402,1404,1407,1409],{"class":1403,"line":694},[297,478,479],[295,1405,1406],{"class":419},"  }",[295,1408,1339],{"class":484},[295,1410,498],{"class":419},[295,1412,1413,1415,1417],{"class":297,"line":713},[295,1414,606],{"class":419},[295,1416,454],{"class":453},[295,1418,474],{"class":419},[295,1420,1421],{"class":297,"line":724},[295,1422,562],{"emptyLinePlaceholder":561},[295,1424,1426,1428,1430,1432,1434,1436,1438,1440,1443,1445,1448,1450,1452],{"class":1425,"line":747},[297,478,479],[295,1427,450],{"class":419},[295,1429,660],{"class":453},[295,1431,732],{"class":457},[295,1433,464],{"class":419},[295,1435,426],{"class":419},[295,1437,1336],{"class":305},[295,1439,426],{"class":419},[295,1441,1442],{"class":415}," bind",[295,1444,582],{"class":419},[295,1446,1447],{"class":484},"this",[295,1449,965],{"class":419},[295,1451,1336],{"class":484},[295,1453,981],{"class":419},[295,1455,1457,1459,1461,1463,1465,1467,1469],{"class":1456,"line":776},[297,478,479],[295,1458,632],{"class":419},[295,1460,660],{"class":453},[295,1462,650],{"class":419},[295,1464,665],{"class":484},[295,1466,606],{"class":419},[295,1468,660],{"class":453},[295,1470,650],{"class":419},[295,1472,1474,1476,1478,1480,1482,1484,1486],{"class":1473,"line":804},[297,478,479],[295,1475,632],{"class":419},[295,1477,660],{"class":453},[295,1479,650],{"class":419},[295,1481,684],{"class":484},[295,1483,606],{"class":419},[295,1485,660],{"class":453},[295,1487,650],{"class":419},[295,1489,1491,1493,1495,1497,1499,1501,1503],{"class":1490,"line":832},[297,478,479],[295,1492,632],{"class":419},[295,1494,660],{"class":453},[295,1496,650],{"class":419},[295,1498,703],{"class":484},[295,1500,606],{"class":419},[295,1502,660],{"class":453},[295,1504,650],{"class":419},[295,1506,1508,1510,1512],{"class":1507,"line":841},[297,478,479],[295,1509,606],{"class":419},[295,1511,660],{"class":453},[295,1513,650],{"class":419},[295,1515,1518,1520,1522,1524,1526,1528,1530,1532],{"class":1516,"line":1517},[297,478,517],22,[295,1519,450],{"class":419},[295,1521,729],{"class":301},[295,1523,732],{"class":457},[295,1525,464],{"class":419},[295,1527,426],{"class":419},[295,1529,739],{"class":305},[295,1531,426],{"class":419},[295,1533,650],{"class":419},[295,1535,1538,1540,1542,1544,1546,1548,1550,1552,1554,1556,1558,1560],{"class":1536,"line":1537},[297,478,517],23,[295,1539,632],{"class":419},[295,1541,660],{"class":453},[295,1543,732],{"class":457},[295,1545,464],{"class":419},[295,1547,426],{"class":419},[295,1549,760],{"class":305},[295,1551,426],{"class":419},[295,1553,650],{"class":419},[295,1555,665],{"class":484},[295,1557,606],{"class":419},[295,1559,660],{"class":453},[295,1561,650],{"class":419},[295,1563,1566,1568,1570,1572,1574,1576,1578,1580,1582,1584,1586,1588],{"class":1564,"line":1565},[297,478,517],24,[295,1567,632],{"class":419},[295,1569,660],{"class":453},[295,1571,732],{"class":457},[295,1573,464],{"class":419},[295,1575,426],{"class":419},[295,1577,760],{"class":305},[295,1579,426],{"class":419},[295,1581,650],{"class":419},[295,1583,684],{"class":484},[295,1585,606],{"class":419},[295,1587,660],{"class":453},[295,1589,650],{"class":419},[295,1591,1594,1596,1598,1600,1602,1604,1606,1608,1610,1612,1614,1616],{"class":1592,"line":1593},[297,478,517],25,[295,1595,632],{"class":419},[295,1597,660],{"class":453},[295,1599,732],{"class":457},[295,1601,464],{"class":419},[295,1603,426],{"class":419},[295,1605,760],{"class":305},[295,1607,426],{"class":419},[295,1609,650],{"class":419},[295,1611,703],{"class":484},[295,1613,606],{"class":419},[295,1615,660],{"class":453},[295,1617,650],{"class":419},[295,1619,1622,1624,1626],{"class":1620,"line":1621},[297,478,517],26,[295,1623,606],{"class":419},[295,1625,729],{"class":301},[295,1627,650],{"class":419},[285,1629,1634],{"className":1630,"code":1631,"filename":1632,"language":1633,"meta":291,"style":291},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight has-diff","\u003Cdiv class=\"carousel\"> \u003C!-- [!code --] -->\n  \u003Cdiv>Slide 1\u003C\u002Fdiv> \u003C!-- [!code --] -->\n  \u003Cdiv>Slide 2\u003C\u002Fdiv> \u003C!-- [!code --] -->\n  \u003Cdiv>Slide 3\u003C\u002Fdiv> \u003C!-- [!code --] -->\n\u003C\u002Fdiv> \u003C!-- [!code --] -->\n\u003Cblossom-carousel class=\"carousel grid! grid-auto-cols grid-cols-[calc((100% - 3rem) \u002F 4)] gap-4\"> \u003C!-- [!code ++] -->\n  \u003Cdiv class=\"slide snap-start\">Slide 1\u003C\u002Fdiv> \u003C!-- [!code ++] -->\n  \u003Cdiv class=\"slide snap-start\">Slide 2\u003C\u002Fdiv> \u003C!-- [!code ++] -->\n  \u003Cdiv class=\"slide snap-start\">Slide 3\u003C\u002Fdiv> \u003C!-- [!code ++] -->\n\u003C\u002Fblossom-carousel> \u003C!-- [!code ++] -->\n","jQuery","html",[243,1635,1636,1655,1672,1689,1706,1715,1735,1762,1789,1816],{"__ignoreMap":291},[295,1637,1639,1641,1643,1645,1647,1649,1651,1653],{"class":1638,"line":298},[297,478,479],[295,1640,450],{"class":419},[295,1642,660],{"class":453},[295,1644,732],{"class":457},[295,1646,464],{"class":419},[295,1648,426],{"class":419},[295,1650,1336],{"class":305},[295,1652,426],{"class":419},[295,1654,650],{"class":419},[295,1656,1658,1660,1662,1664,1666,1668,1670],{"class":1657,"line":315},[297,478,479],[295,1659,632],{"class":419},[295,1661,660],{"class":453},[295,1663,650],{"class":419},[295,1665,665],{"class":484},[295,1667,606],{"class":419},[295,1669,660],{"class":453},[295,1671,650],{"class":419},[295,1673,1675,1677,1679,1681,1683,1685,1687],{"class":1674,"line":502},[297,478,479],[295,1676,632],{"class":419},[295,1678,660],{"class":453},[295,1680,650],{"class":419},[295,1682,684],{"class":484},[295,1684,606],{"class":419},[295,1686,660],{"class":453},[295,1688,650],{"class":419},[295,1690,1692,1694,1696,1698,1700,1702,1704],{"class":1691,"line":518},[297,478,479],[295,1693,632],{"class":419},[295,1695,660],{"class":453},[295,1697,650],{"class":419},[295,1699,703],{"class":484},[295,1701,606],{"class":419},[295,1703,660],{"class":453},[295,1705,650],{"class":419},[295,1707,1709,1711,1713],{"class":1708,"line":545},[297,478,479],[295,1710,606],{"class":419},[295,1712,660],{"class":453},[295,1714,650],{"class":419},[295,1716,1718,1720,1723,1725,1727,1729,1731,1733],{"class":1717,"line":558},[297,478,517],[295,1719,450],{"class":419},[295,1721,1722],{"class":453},"blossom-carousel",[295,1724,732],{"class":457},[295,1726,464],{"class":419},[295,1728,426],{"class":419},[295,1730,739],{"class":305},[295,1732,426],{"class":419},[295,1734,650],{"class":419},[295,1736,1738,1740,1742,1744,1746,1748,1750,1752,1754,1756,1758,1760],{"class":1737,"line":566},[297,478,517],[295,1739,632],{"class":419},[295,1741,660],{"class":453},[295,1743,732],{"class":457},[295,1745,464],{"class":419},[295,1747,426],{"class":419},[295,1749,760],{"class":305},[295,1751,426],{"class":419},[295,1753,650],{"class":419},[295,1755,665],{"class":484},[295,1757,606],{"class":419},[295,1759,660],{"class":453},[295,1761,650],{"class":419},[295,1763,1765,1767,1769,1771,1773,1775,1777,1779,1781,1783,1785,1787],{"class":1764,"line":603},[297,478,517],[295,1766,632],{"class":419},[295,1768,660],{"class":453},[295,1770,732],{"class":457},[295,1772,464],{"class":419},[295,1774,426],{"class":419},[295,1776,760],{"class":305},[295,1778,426],{"class":419},[295,1780,650],{"class":419},[295,1782,684],{"class":484},[295,1784,606],{"class":419},[295,1786,660],{"class":453},[295,1788,650],{"class":419},[295,1790,1792,1794,1796,1798,1800,1802,1804,1806,1808,1810,1812,1814],{"class":1791,"line":613},[297,478,517],[295,1793,632],{"class":419},[295,1795,660],{"class":453},[295,1797,732],{"class":457},[295,1799,464],{"class":419},[295,1801,426],{"class":419},[295,1803,760],{"class":305},[295,1805,426],{"class":419},[295,1807,650],{"class":419},[295,1809,703],{"class":484},[295,1811,606],{"class":419},[295,1813,660],{"class":453},[295,1815,650],{"class":419},[295,1817,1819,1821,1823],{"class":1818,"line":618},[297,478,517],[295,1820,606],{"class":419},[295,1822,1722],{"class":453},[295,1824,650],{"class":419},[228,1826,1828],{"id":1827},"options","Options",[221,1830,1831],{},"Slick options describe how its track should move, clone slides, and generate UI. In Blossom, most of those choices become CSS or small browser APIs.",[1833,1834,1835,1848],"table",{},[1836,1837,1838],"thead",{},[1839,1840,1841,1845],"tr",{},[1842,1843,1844],"th",{},"Slick concept",[1842,1846,1847],{},"Blossom approach",[1849,1850,1851,1865,1881,1893,1903,1916,1925,1939,1956,1977],"tbody",{},[1839,1852,1853,1858],{},[1854,1855,1856],"td",{},[243,1857,252],{},[1854,1859,1860,1861,1864],{},"Use CSS ",[243,1862,1863],{},"grid-auto-columns"," to define the relative width of slides.",[1839,1866,1867,1871],{},[1854,1868,1869],{},[243,1870,256],{},[1854,1872,1860,1873,1876,1877,1880],{},[243,1874,1875],{},"scroll-snap-align"," within ",[243,1878,1879],{},":nth-child(xn)"," or nest slides in groups.",[1839,1882,1883,1887],{},[1854,1884,1885],{},[243,1886,259],{},[1854,1888,1889,1890,1342],{},"Use ",[243,1891,1892],{},"scroll-snap-align: center",[1839,1894,1895,1900],{},[1854,1896,1897],{},[243,1898,1899],{},"variableWidth",[1854,1901,1902],{},"Let slides size themselves with CSS.",[1839,1904,1905,1910],{},[1854,1906,1907],{},[243,1908,1909],{},"adaptiveHeight",[1854,1911,1912,1913,1342],{},"Let content define height, or update layout with ",[243,1914,1915],{},"ResizeObserver",[1839,1917,1918,1922],{},[1854,1919,1920],{},[243,1921,263],{},[1854,1923,1924],{},"Use CSS media queries and container queries.",[1839,1926,1927,1932],{},[1854,1928,1929],{},[243,1930,1931],{},"infinite",[1854,1933,1934,1935,1342],{},"Prefer bounded native scrolling, or use the experimental repeat pattern when an infinite effect is required. See ",[1936,1937,1938],"a",{"href":157},"Repeat example",[1839,1940,1941,1950],{},[1854,1942,1943,1946,1947],{},[243,1944,1945],{},"draggable"," \u002F ",[243,1948,1949],{},"swipe",[1854,1951,1860,1952,1955],{},[243,1953,1954],{},"overflow: hidden"," on the carousel to disable dragging and scrolling.",[1839,1957,1958,1963],{},[1854,1959,1960],{},[243,1961,1962],{},"arrows",[1854,1964,1965,1966,1969,1970,1973,1974,1342],{},"Use buttons that call ",[243,1967,1968],{},"prev()"," and ",[243,1971,1972],{},"next()",". See ",[1936,1975,1976],{"href":87},"Buttons example",[1839,1978,1979,1984],{},[1854,1980,1981],{},[243,1982,1983],{},"dots",[1854,1985,1986,1987,1990,1991,1973,1994,1342],{},"Build dots from ",[243,1988,1989],{},"IntersectionObserver"," or ",[243,1992,1993],{},"scrollsnapchange",[1936,1995,1996],{"href":92},"Dots example",[221,1998,1999],{},"For example, this Slick setup:",[285,2001,2003],{"className":406,"code":2002,"filename":206,"language":408,"meta":291,"style":291},"$(\".carousel\").slick({\n  slidesToShow: 1,\n  slidesToScroll: 1,\n  centerMode: true,\n  responsive: [{ breakpoint: 768, settings: { slidesToShow: 3 } }],\n});\n",[243,2004,2005,2030,2042,2053,2066,2111],{"__ignoreMap":291},[295,2006,2007,2010,2012,2014,2017,2019,2021,2023,2025,2027],{"class":297,"line":298},[295,2008,2009],{"class":937},"$",[295,2011,1309],{"class":484},[295,2013,426],{"class":419},[295,2015,2016],{"class":305},".carousel",[295,2018,426],{"class":419},[295,2020,1339],{"class":484},[295,2022,1342],{"class":419},[295,2024,1345],{"class":937},[295,2026,1309],{"class":484},[295,2028,2029],{"class":419},"{\n",[295,2031,2032,2035,2037,2039],{"class":297,"line":315},[295,2033,2034],{"class":453},"  slidesToShow",[295,2036,582],{"class":419},[295,2038,597],{"class":585},[295,2040,2041],{"class":419},",\n",[295,2043,2044,2047,2049,2051],{"class":297,"line":502},[295,2045,2046],{"class":453},"  slidesToScroll",[295,2048,582],{"class":419},[295,2050,597],{"class":585},[295,2052,2041],{"class":419},[295,2054,2055,2058,2060,2064],{"class":297,"line":518},[295,2056,2057],{"class":453},"  centerMode",[295,2059,582],{"class":419},[295,2061,2063],{"class":2062},"sfNiH"," true",[295,2065,2041],{"class":419},[295,2067,2068,2071,2073,2076,2078,2081,2083,2086,2088,2091,2093,2095,2097,2099,2102,2104,2106,2109],{"class":297,"line":545},[295,2069,2070],{"class":453},"  responsive",[295,2072,582],{"class":419},[295,2074,2075],{"class":484}," [",[295,2077,1350],{"class":419},[295,2079,2080],{"class":453}," breakpoint",[295,2082,582],{"class":419},[295,2084,2085],{"class":585}," 768",[295,2087,589],{"class":419},[295,2089,2090],{"class":453}," settings",[295,2092,582],{"class":419},[295,2094,523],{"class":419},[295,2096,579],{"class":453},[295,2098,582],{"class":419},[295,2100,2101],{"class":585}," 3",[295,2103,529],{"class":419},[295,2105,529],{"class":419},[295,2107,2108],{"class":484},"]",[295,2110,2041],{"class":419},[295,2112,2113,2116,2118],{"class":297,"line":558},[295,2114,2115],{"class":419},"}",[295,2117,1339],{"class":484},[295,2119,429],{"class":419},[221,2121,2122],{},"becomes CSS:",[285,2124,2129],{"className":2125,"code":2126,"filename":2127,"language":2128,"meta":291,"style":291},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".carousel {\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: 100%;\n  gap: 1rem;\n  scroll-snap-type: inline mandatory;\n}\n\n.slide {\n  scroll-snap-align: center;\n}\n\n@media (min-width: 768px) {\n  .carousel {\n    grid-auto-columns: calc((100% - 2rem) \u002F 3);\n  }\n}\n","Blossom","css",[243,2130,2131,2139,2152,2164,2176,2188,2200,2204,2208,2217,2229,2233,2237,2257,2266,2300,2305],{"__ignoreMap":291},[295,2132,2133,2135,2137],{"class":297,"line":298},[295,2134,1342],{"class":419},[295,2136,1336],{"class":301},[295,2138,944],{"class":419},[295,2140,2141,2145,2147,2150],{"class":297,"line":315},[295,2142,2144],{"class":2143},"sqsOY","  display",[295,2146,582],{"class":419},[295,2148,2149],{"class":484}," grid",[295,2151,429],{"class":419},[295,2153,2154,2157,2159,2162],{"class":297,"line":502},[295,2155,2156],{"class":2143},"  grid-auto-flow",[295,2158,582],{"class":419},[295,2160,2161],{"class":484}," column",[295,2163,429],{"class":419},[295,2165,2166,2169,2171,2174],{"class":297,"line":518},[295,2167,2168],{"class":2143},"  grid-auto-columns",[295,2170,582],{"class":419},[295,2172,2173],{"class":585}," 100%",[295,2175,429],{"class":419},[295,2177,2178,2181,2183,2186],{"class":297,"line":545},[295,2179,2180],{"class":2143},"  gap",[295,2182,582],{"class":419},[295,2184,2185],{"class":585}," 1rem",[295,2187,429],{"class":419},[295,2189,2190,2193,2195,2198],{"class":297,"line":558},[295,2191,2192],{"class":2143},"  scroll-snap-type",[295,2194,582],{"class":419},[295,2196,2197],{"class":484}," inline mandatory",[295,2199,429],{"class":419},[295,2201,2202],{"class":297,"line":566},[295,2203,1165],{"class":419},[295,2205,2206],{"class":297,"line":603},[295,2207,562],{"emptyLinePlaceholder":561},[295,2209,2210,2212,2215],{"class":297,"line":613},[295,2211,1342],{"class":419},[295,2213,2214],{"class":301},"slide",[295,2216,944],{"class":419},[295,2218,2219,2222,2224,2227],{"class":297,"line":618},[295,2220,2221],{"class":2143},"  scroll-snap-align",[295,2223,582],{"class":419},[295,2225,2226],{"class":484}," center",[295,2228,429],{"class":419},[295,2230,2231],{"class":297,"line":629},[295,2232,1165],{"class":419},[295,2234,2235],{"class":297,"line":654},[295,2236,562],{"emptyLinePlaceholder":561},[295,2238,2239,2242,2245,2248,2250,2253,2255],{"class":297,"line":675},[295,2240,2241],{"class":415},"@media",[295,2243,2244],{"class":419}," (",[295,2246,2247],{"class":301},"min-width",[295,2249,582],{"class":419},[295,2251,2252],{"class":585}," 768px",[295,2254,1339],{"class":419},[295,2256,944],{"class":419},[295,2258,2259,2262,2264],{"class":297,"line":694},[295,2260,2261],{"class":419},"  .",[295,2263,1336],{"class":301},[295,2265,944],{"class":419},[295,2267,2268,2271,2273,2276,2278,2280,2283,2286,2289,2291,2293,2296,2298],{"class":297,"line":713},[295,2269,2270],{"class":2143},"    grid-auto-columns",[295,2272,582],{"class":419},[295,2274,2275],{"class":937}," calc",[295,2277,1309],{"class":419},[295,2279,1309],{"class":484},[295,2281,2282],{"class":585},"100%",[295,2284,2285],{"class":419}," -",[295,2287,2288],{"class":585}," 2rem",[295,2290,1339],{"class":419},[295,2292,1946],{"class":484},[295,2294,2295],{"class":585},"3",[295,2297,1339],{"class":484},[295,2299,429],{"class":419},[295,2301,2302],{"class":297,"line":724},[295,2303,2304],{"class":419},"  }\n",[295,2306,2307],{"class":297,"line":747},[295,2308,1165],{"class":419},[228,2310,2312],{"id":2311},"controls","Controls",[221,2314,2315,2316,1969,2318,2320],{},"Slick controls call methods on the Slick instance. Blossom exposes ",[243,2317,1968],{},[243,2319,1972],{}," on the carousel element or component ref.",[285,2322,2325],{"className":2323,"code":2324,"language":469,"meta":291,"style":291},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight has-diff","$(\".carousel\").slick(\"slickPrev\"); \u002F\u002F [!code --]\n$(\".carousel\").slick(\"slickNext\"); \u002F\u002F [!code --]\nblossom.value.prev(); \u002F\u002F [!code ++]\nblossom.value.next(); \u002F\u002F [!code ++]\n",[243,2326,2327,2359,2391,2411],{"__ignoreMap":291},[295,2328,2330,2332,2334,2336,2338,2340,2342,2344,2346,2348,2350,2353,2355,2357],{"class":2329,"line":298},[297,478,479],[295,2331,2009],{"class":937},[295,2333,1309],{"class":484},[295,2335,426],{"class":419},[295,2337,2016],{"class":305},[295,2339,426],{"class":419},[295,2341,1339],{"class":484},[295,2343,1342],{"class":419},[295,2345,1345],{"class":937},[295,2347,1309],{"class":484},[295,2349,426],{"class":419},[295,2351,2352],{"class":305},"slickPrev",[295,2354,426],{"class":419},[295,2356,1339],{"class":484},[295,2358,498],{"class":419},[295,2360,2362,2364,2366,2368,2370,2372,2374,2376,2378,2380,2382,2385,2387,2389],{"class":2361,"line":315},[297,478,479],[295,2363,2009],{"class":937},[295,2365,1309],{"class":484},[295,2367,426],{"class":419},[295,2369,2016],{"class":305},[295,2371,426],{"class":419},[295,2373,1339],{"class":484},[295,2375,1342],{"class":419},[295,2377,1345],{"class":937},[295,2379,1309],{"class":484},[295,2381,426],{"class":419},[295,2383,2384],{"class":305},"slickNext",[295,2386,426],{"class":419},[295,2388,1339],{"class":484},[295,2390,498],{"class":419},[295,2392,2394,2397,2399,2402,2404,2407,2409],{"class":2393,"line":502},[297,478,517],[295,2395,2396],{"class":484},"blossom",[295,2398,1342],{"class":419},[295,2400,2401],{"class":484},"value",[295,2403,1342],{"class":419},[295,2405,2406],{"class":937},"prev",[295,2408,941],{"class":484},[295,2410,498],{"class":419},[295,2412,2414,2416,2418,2420,2422,2425,2427],{"class":2413,"line":518},[297,478,517],[295,2415,2396],{"class":484},[295,2417,1342],{"class":419},[295,2419,2401],{"class":484},[295,2421,1342],{"class":419},[295,2423,2424],{"class":937},"next",[295,2426,941],{"class":484},[295,2428,498],{"class":419},[221,2430,2431],{},"For direct slide navigation, use native scrolling on the target slide.",[285,2433,2436],{"className":2434,"code":2435,"language":469,"meta":291,"style":291},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","slides[index].scrollIntoView({\n  behavior: \"smooth\",\n  inline: \"center\",\n  block: \"nearest\",\n});\n",[243,2437,2438,2452,2468,2484,2500],{"__ignoreMap":291},[295,2439,2440,2443,2445,2448,2450],{"class":297,"line":298},[295,2441,2442],{"class":484},"slides[index]",[295,2444,1342],{"class":419},[295,2446,2447],{"class":937},"scrollIntoView",[295,2449,1309],{"class":484},[295,2451,2029],{"class":419},[295,2453,2454,2457,2459,2461,2464,2466],{"class":297,"line":315},[295,2455,2456],{"class":453},"  behavior",[295,2458,582],{"class":419},[295,2460,420],{"class":419},[295,2462,2463],{"class":305},"smooth",[295,2465,426],{"class":419},[295,2467,2041],{"class":419},[295,2469,2470,2473,2475,2477,2480,2482],{"class":297,"line":502},[295,2471,2472],{"class":453},"  inline",[295,2474,582],{"class":419},[295,2476,420],{"class":419},[295,2478,2479],{"class":305},"center",[295,2481,426],{"class":419},[295,2483,2041],{"class":419},[295,2485,2486,2489,2491,2493,2496,2498],{"class":297,"line":518},[295,2487,2488],{"class":453},"  block",[295,2490,582],{"class":419},[295,2492,420],{"class":419},[295,2494,2495],{"class":305},"nearest",[295,2497,426],{"class":419},[295,2499,2041],{"class":419},[295,2501,2502,2504,2506],{"class":297,"line":545},[295,2503,2115],{"class":419},[295,2505,1339],{"class":484},[295,2507,429],{"class":419},[228,2509,2511],{"id":2510},"api","API",[221,2513,2514,2515,2518],{},"Slick commonly uses ",[243,2516,2517],{},"afterChange"," to track the current slide.",[221,2520,2521,2522,253,2524,2526,2527,2530],{},"With Blossom, the carousel is a real scroll container, so use browser APIs such as ",[243,2523,1989],{},[243,2525,1993],{},", or ",[243,2528,2529],{},"scroll"," events depending on the browser support you need.",[285,2532,2534],{"className":2323,"code":2533,"language":469,"meta":291,"style":291},"$(\".carousel\").on(\"afterChange\", (_event, _slick, currentSlide) => { \u002F\u002F [!code --]\n  setSelectedIndex(currentSlide); \u002F\u002F [!code --]\n}); \u002F\u002F [!code --]\n\ncarousel.addEventListener(\"scrollsnapchange\", (event) => { \u002F\u002F [!code ++]\n  setSelectedIndex(event.detail.index); \u002F\u002F [!code ++]\n}); \u002F\u002F [!code ++]\n\nOr use IntersectionObserver for wider browser support\n\nconst slides = Array.from(carousel.children); \u002F\u002F [!code ++]\nconst observer = new IntersectionObserver( \u002F\u002F [!code ++]\n  (entries) => { \u002F\u002F [!code ++]\n    const activeEntry = entries.find((entry) => entry.isIntersecting); \u002F\u002F [!code ++]\n    if (activeEntry) { \u002F\u002F [!code ++]\n      setSelectedIndex(slides.indexOf(activeEntry.target)); \u002F\u002F [!code ++]\n    } \u002F\u002F [!code ++]\n  }, \u002F\u002F [!code ++]\n  { root: carousel, threshold: 0.5 }, \u002F\u002F [!code ++]\n); \u002F\u002F [!code ++]\nslides.forEach((slide) => observer.observe(slide)); \u002F\u002F [!code ++]\n",[243,2535,2536,2588,2603,2612,2616,2647,2670,2679,2683,2688,2692,2719,2738,2753,2794,2810,2840,2846,2852,2878,2885],{"__ignoreMap":291},[295,2537,2539,2541,2543,2545,2547,2549,2551,2553,2556,2558,2560,2562,2564,2566,2568,2572,2574,2577,2579,2582,2584,2586],{"class":2538,"line":298},[297,478,479],[295,2540,2009],{"class":937},[295,2542,1309],{"class":484},[295,2544,426],{"class":419},[295,2546,2016],{"class":305},[295,2548,426],{"class":419},[295,2550,1339],{"class":484},[295,2552,1342],{"class":419},[295,2554,2555],{"class":937},"on",[295,2557,1309],{"class":484},[295,2559,426],{"class":419},[295,2561,2517],{"class":305},[295,2563,426],{"class":419},[295,2565,589],{"class":419},[295,2567,2244],{"class":419},[295,2569,2571],{"class":2570},"sHdIc","_event",[295,2573,589],{"class":419},[295,2575,2576],{"class":2570}," _slick",[295,2578,589],{"class":419},[295,2580,2581],{"class":2570}," currentSlide",[295,2583,1339],{"class":419},[295,2585,1314],{"class":457},[295,2587,523],{"class":419},[295,2589,2591,2594,2596,2599,2601],{"class":2590,"line":315},[297,478,479],[295,2592,2593],{"class":937},"  setSelectedIndex",[295,2595,1309],{"class":453},[295,2597,2598],{"class":484},"currentSlide",[295,2600,1339],{"class":453},[295,2602,498],{"class":419},[295,2604,2606,2608,2610],{"class":2605,"line":502},[297,478,479],[295,2607,2115],{"class":419},[295,2609,1339],{"class":484},[295,2611,498],{"class":419},[295,2613,2614],{"class":297,"line":518},[295,2615,562],{"emptyLinePlaceholder":561},[295,2617,2619,2621,2623,2626,2628,2630,2632,2634,2636,2638,2641,2643,2645],{"class":2618,"line":545},[297,478,517],[295,2620,1336],{"class":484},[295,2622,1342],{"class":419},[295,2624,2625],{"class":937},"addEventListener",[295,2627,1309],{"class":484},[295,2629,426],{"class":419},[295,2631,1993],{"class":305},[295,2633,426],{"class":419},[295,2635,589],{"class":419},[295,2637,2244],{"class":419},[295,2639,2640],{"class":2570},"event",[295,2642,1339],{"class":419},[295,2644,1314],{"class":457},[295,2646,523],{"class":419},[295,2648,2650,2652,2654,2656,2658,2661,2663,2666,2668],{"class":2649,"line":558},[297,478,517],[295,2651,2593],{"class":937},[295,2653,1309],{"class":453},[295,2655,2640],{"class":484},[295,2657,1342],{"class":419},[295,2659,2660],{"class":484},"detail",[295,2662,1342],{"class":419},[295,2664,2665],{"class":484},"index",[295,2667,1339],{"class":453},[295,2669,498],{"class":419},[295,2671,2673,2675,2677],{"class":2672,"line":566},[297,478,517],[295,2674,2115],{"class":419},[295,2676,1339],{"class":484},[295,2678,498],{"class":419},[295,2680,2681],{"class":297,"line":603},[295,2682,562],{"emptyLinePlaceholder":561},[295,2684,2685],{"class":297,"line":613},[295,2686,2687],{"class":484},"Or use IntersectionObserver for wider browser support\n",[295,2689,2690],{"class":297,"line":618},[295,2691,562],{"emptyLinePlaceholder":561},[295,2693,2695,2697,2700,2702,2705,2707,2709,2712,2714,2717],{"class":2694,"line":629},[297,478,517],[295,2696,569],{"class":457},[295,2698,2699],{"class":484}," slides ",[295,2701,464],{"class":419},[295,2703,2704],{"class":484}," Array",[295,2706,1342],{"class":419},[295,2708,488],{"class":937},[295,2710,2711],{"class":484},"(carousel",[295,2713,1342],{"class":419},[295,2715,2716],{"class":484},"children)",[295,2718,498],{"class":419},[295,2720,2722,2724,2727,2729,2732,2735],{"class":2721,"line":654},[297,478,517],[295,2723,569],{"class":457},[295,2725,2726],{"class":484}," observer ",[295,2728,464],{"class":419},[295,2730,2731],{"class":419}," new",[295,2733,2734],{"class":937}," IntersectionObserver",[295,2736,2737],{"class":484},"( ",[295,2739,2741,2744,2747,2749,2751],{"class":2740,"line":675},[297,478,517],[295,2742,2743],{"class":419},"  (",[295,2745,2746],{"class":2570},"entries",[295,2748,1339],{"class":419},[295,2750,1314],{"class":457},[295,2752,523],{"class":419},[295,2754,2756,2758,2761,2763,2766,2768,2771,2773,2775,2778,2780,2782,2785,2787,2790,2792],{"class":2755,"line":694},[297,478,517],[295,2757,1322],{"class":457},[295,2759,2760],{"class":484}," activeEntry",[295,2762,1328],{"class":419},[295,2764,2765],{"class":484}," entries",[295,2767,1342],{"class":419},[295,2769,2770],{"class":937},"find",[295,2772,1309],{"class":453},[295,2774,1309],{"class":419},[295,2776,2777],{"class":2570},"entry",[295,2779,1339],{"class":419},[295,2781,1314],{"class":457},[295,2783,2784],{"class":484}," entry",[295,2786,1342],{"class":419},[295,2788,2789],{"class":484},"isIntersecting",[295,2791,1339],{"class":453},[295,2793,498],{"class":419},[295,2795,2797,2800,2802,2805,2808],{"class":2796,"line":713},[297,478,517],[295,2798,2799],{"class":415},"    if",[295,2801,2244],{"class":453},[295,2803,2804],{"class":484},"activeEntry",[295,2806,2807],{"class":453},") ",[295,2809,1350],{"class":419},[295,2811,2813,2816,2818,2821,2823,2826,2828,2830,2832,2835,2838],{"class":2812,"line":724},[297,478,517],[295,2814,2815],{"class":937},"      setSelectedIndex",[295,2817,1309],{"class":453},[295,2819,2820],{"class":484},"slides",[295,2822,1342],{"class":419},[295,2824,2825],{"class":937},"indexOf",[295,2827,1309],{"class":453},[295,2829,2804],{"class":484},[295,2831,1342],{"class":419},[295,2833,2834],{"class":484},"target",[295,2836,2837],{"class":453},"))",[295,2839,498],{"class":419},[295,2841,2843],{"class":2842,"line":747},[297,478,517],[295,2844,2845],{"class":419},"    }",[295,2847,2849],{"class":2848,"line":776},[297,478,517],[295,2850,2851],{"class":419},"  },",[295,2853,2855,2858,2861,2863,2865,2867,2870,2872,2875],{"class":2854,"line":804},[297,478,517],[295,2856,2857],{"class":419},"  {",[295,2859,2860],{"class":453}," root",[295,2862,582],{"class":419},[295,2864,1294],{"class":484},[295,2866,589],{"class":419},[295,2868,2869],{"class":453}," threshold",[295,2871,582],{"class":419},[295,2873,2874],{"class":585}," 0.5",[295,2876,2877],{"class":419}," },",[295,2879,2881,2883],{"class":2880,"line":832},[297,478,517],[295,2882,1339],{"class":484},[295,2884,498],{"class":419},[295,2886,2888,2890,2892,2895,2897,2899,2901,2903,2905,2908,2910,2913,2916],{"class":2887,"line":841},[297,478,517],[295,2889,2820],{"class":484},[295,2891,1342],{"class":419},[295,2893,2894],{"class":937},"forEach",[295,2896,1309],{"class":484},[295,2898,1309],{"class":419},[295,2900,2214],{"class":2570},[295,2902,1339],{"class":419},[295,2904,1314],{"class":457},[295,2906,2907],{"class":484}," observer",[295,2909,1342],{"class":419},[295,2911,2912],{"class":937},"observe",[295,2914,2915],{"class":484},"(slide))",[295,2917,498],{"class":419},[228,2919,2921],{"id":2920},"features","Features",[221,2923,2924],{},"Slick features usually become either small Blossom wrappers or native platform features.",[1833,2926,2927,2937],{},[1836,2928,2929],{},[1839,2930,2931,2934],{},[1842,2932,2933],{},"Slick feature",[1842,2935,2936],{},"Blossom replacement",[1849,2938,2939,2951,2962,2973,2981,2993,3001],{},[1839,2940,2941,2944],{},[1854,2942,2943],{},"Arrows",[1854,2945,2946,2947,1969,2949,1342],{},"Buttons that call ",[243,2948,1968],{},[243,2950,1972],{},[1839,2952,2953,2955],{},[1854,2954,91],{},[1854,2956,2957,2958,1990,2960,1342],{},"Dots backed by ",[243,2959,1989],{},[243,2961,1993],{},[1839,2963,2964,2967],{},[1854,2965,2966],{},"Autoplay",[1854,2968,2969,2970,2972],{},"A timer that calls ",[243,2971,1972],{}," or scrolls the next slide into view.",[1839,2974,2975,2978],{},[1854,2976,2977],{},"Fade",[1854,2979,2980],{},"CSS scroll-driven animations or intersection state.",[1839,2982,2983,2986],{},[1854,2984,2985],{},"Lazy load",[1854,2987,2988,2989,2992],{},"Native ",[243,2990,2991],{},"loading=\"lazy\""," or framework image components.",[1839,2994,2995,2998],{},[1854,2996,2997],{},"Rows",[1854,2999,3000],{},"CSS grid.",[1839,3002,3003,3006],{},[1854,3004,3005],{},"Syncing sliders",[1854,3007,3008,3009,1342],{},"Shared selected state plus ",[243,3010,3011],{},"scrollIntoView()",[221,3013,3014],{},"Rebuild Slick features deliberately. Native scrolling often replaces more of Slick than expected.",[228,3016,3018],{"id":3017},"lifecycle","Lifecycle",[221,3020,3021],{},"Slicks's and Blossom's lifecycle methods are similar.",[269,3023,3024],{"color":271,"icon":272},"Blossom initializes automatically when using framework components.",[285,3026,3028],{"className":2323,"code":3027,"language":469,"meta":291,"style":291},"$(\".carousel\").slick(\"refresh\"); \u002F\u002F [!code --]\n$(\".carousel\").slick(\"unslick\"); \u002F\u002F [!code --]\nblossom.init(); \u002F\u002F [!code ++]\nblossom.destroy(); \u002F\u002F [!code ++]\n",[243,3029,3030,3062,3093,3107],{"__ignoreMap":291},[295,3031,3033,3035,3037,3039,3041,3043,3045,3047,3049,3051,3053,3056,3058,3060],{"class":3032,"line":298},[297,478,479],[295,3034,2009],{"class":937},[295,3036,1309],{"class":484},[295,3038,426],{"class":419},[295,3040,2016],{"class":305},[295,3042,426],{"class":419},[295,3044,1339],{"class":484},[295,3046,1342],{"class":419},[295,3048,1345],{"class":937},[295,3050,1309],{"class":484},[295,3052,426],{"class":419},[295,3054,3055],{"class":305},"refresh",[295,3057,426],{"class":419},[295,3059,1339],{"class":484},[295,3061,498],{"class":419},[295,3063,3065,3067,3069,3071,3073,3075,3077,3079,3081,3083,3085,3087,3089,3091],{"class":3064,"line":315},[297,478,479],[295,3066,2009],{"class":937},[295,3068,1309],{"class":484},[295,3070,426],{"class":419},[295,3072,2016],{"class":305},[295,3074,426],{"class":419},[295,3076,1339],{"class":484},[295,3078,1342],{"class":419},[295,3080,1345],{"class":937},[295,3082,1309],{"class":484},[295,3084,426],{"class":419},[295,3086,1394],{"class":305},[295,3088,426],{"class":419},[295,3090,1339],{"class":484},[295,3092,498],{"class":419},[295,3094,3096,3098,3100,3103,3105],{"class":3095,"line":502},[297,478,517],[295,3097,2396],{"class":484},[295,3099,1342],{"class":419},[295,3101,3102],{"class":937},"init",[295,3104,941],{"class":484},[295,3106,498],{"class":419},[295,3108,3110,3112,3114,3117,3119],{"class":3109,"line":518},[297,478,517],[295,3111,2396],{"class":484},[295,3113,1342],{"class":419},[295,3115,3116],{"class":937},"destroy",[295,3118,941],{"class":484},[295,3120,498],{"class":419},[228,3122,3124],{"id":3123},"migration-checklist","Migration checklist",[3126,3127,3128,3131,3137,3143,3146,3158,3169,3172],"ul",{},[239,3129,3130],{},"Remove Slick packages and install the matching Blossom package.",[239,3132,3133,3134,3136],{},"Import ",[243,3135,423],{}," once.",[239,3138,3139,3140,3142],{},"Replace Slick markup and generated track assumptions with ",[243,3141,245],{}," and direct slide children.",[239,3144,3145],{},"Move slide sizing, gaps, snapping, center mode, and responsive behavior into CSS.",[239,3147,3148,3149,1969,3151,3153,3154,1969,3156,1342],{},"Replace ",[243,3150,2352],{},[243,3152,2384],{}," with ",[243,3155,1968],{},[243,3157,1972],{},[239,3159,3148,3160,3153,3163,3165,3166,1342],{},[243,3161,3162],{},"slickGoTo",[243,3164,3011],{}," or native ",[243,3167,3168],{},"scrollTo()",[239,3170,3171],{},"Replace Slick events with browser observers or scroll snap events.",[239,3173,3174],{},"Rebuild only the Slick features your carousel still needs.",[228,3176,3178],{"id":3177},"next-steps","Next steps",[3126,3180,3181,3186,3191,3196,3201],{},[239,3182,3183,3185],{},[1936,3184,16],{"href":17}," - Pick the package for your framework.",[239,3187,3188,3190],{},[1936,3189,66],{"href":67}," - Configure scroll snap behavior with CSS.",[239,3192,3193,3195],{},[1936,3194,86],{"href":87}," - Add previous and next controls.",[239,3197,3198,3200],{},[1936,3199,91],{"href":92}," - Track the active slide with browser APIs.",[239,3202,3203,3205],{},[1936,3204,156],{"href":157}," - Explore an experimental repeating carousel pattern.",[3207,3208,3209],"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);}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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}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}",{"title":291,"searchDepth":315,"depth":315,"links":3211},[3212,3213,3214,3215,3216,3217,3218,3219,3220,3221],{"id":230,"depth":315,"text":231},{"id":276,"depth":315,"text":16},{"id":432,"depth":315,"text":433},{"id":1827,"depth":315,"text":1828},{"id":2311,"depth":315,"text":2312},{"id":2510,"depth":315,"text":2511},{"id":2920,"depth":315,"text":2921},{"id":3017,"depth":315,"text":3018},{"id":3123,"depth":315,"text":3124},{"id":3177,"depth":315,"text":3178},"Migrate from Slick Carousel or React Slick to Blossom Carousel by replacing cloned-track behavior with native scrolling and CSS.","md",null,{},{"icon":209},{"title":3228,"description":3229},"Migrate from Slick Carousel to Blossom Carousel","Replace Slick Carousel and React Slick with Blossom Carousel using native scroll containers, CSS scroll snap, and browser APIs for controls and state.","dlM-R12eFcSLjhcdF_pjFi-7cesAow7dK7-25ODAj9M",[3232,3234],{"title":201,"path":202,"stem":203,"description":3233,"icon":204,"children":-1},"Migrate from Splide to Blossom Carousel by replacing Splide tracks, lists, options, and events with native scrolling and CSS.",{"title":211,"path":212,"stem":213,"description":3235,"icon":214,"children":-1},"Migrate from Flickity to Blossom Carousel by replacing Flickity cells, options, and events with native scrolling and CSS.",1780251481876]