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