[{"data":1,"prerenderedAt":959},["ShallowReactive",2],{"navigation_docs":3,"blog-\u002Fblog\u002Fnavigation-controls-invoker-commands":215},[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":217,"body":218,"date":950,"description":951,"draft":6,"extension":952,"meta":953,"navigation":426,"path":955,"seo":956,"stem":957,"__hash__":958},"blog\u002Fblog\u002F1.navigation-controls-invoker-commands.md","Navigation controls with the Invoker Commands API",{"type":219,"value":220,"toc":945},"minimark",[221,242,245,256,490,497,502,513,531,538,591,601,608,617,621,628,635,638,645,649,652,682,685,918,921,926,941],[222,223,224,225,229,233,234,237,238,241],"p",{},"Blossom Carousel now ships first-class navigation controls through ",[226,227,228],"code",{},"\u003CBlossomPrev>",[230,231,232],"strong",{},","," ",[226,235,236],{},"\u003CBlossomNext>",", and ",[226,239,240],{},"\u003CBlossomDots>",". These components work across the Vue, React, Svelte, and Web Components packages, and they can live anywhere in your layout.",[243,244],"blog-navigation-controls",{},[222,246,247,248,251,252,255],{},"Link them to a carousel with a simple ",[226,249,250],{},"id"," \u002F ",[226,253,254],{},"for"," pairing and Blossom handles the rest. No template ref, no layout constraints and no imperative API.",[257,258,263],"pre",{"className":259,"code":260,"language":261,"meta":262,"style":262},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CBlossomCarousel id=\"gallery\" class=\"carousel\">\n  \u003Cdiv data-blossom-slide class=\"slide\">Slide 01\u003C\u002Fdiv>\n  \u003Cdiv data-blossom-slide class=\"slide\">Slide 02\u003C\u002Fdiv>\n  \u003Cdiv data-blossom-slide class=\"slide\">Slide 03\u003C\u002Fdiv>\n  ...\n\u003C\u002FBlossomCarousel>\n\n\u003CBlossomPrev for=\"gallery\" \u002F>\n\u003CBlossomDots for=\"gallery\" \u002F>\n\u003CBlossomNext for=\"gallery\" \u002F>\n","html","",[226,264,265,309,346,376,406,412,421,428,450,470],{"__ignoreMap":262},[266,267,270,274,278,282,285,288,292,294,297,299,301,304,306],"span",{"class":268,"line":269},"line",1,[266,271,273],{"class":272},"sMK4o","\u003C",[266,275,277],{"class":276},"swJcz","BlossomCarousel",[266,279,281],{"class":280},"spNyl"," id",[266,283,284],{"class":272},"=",[266,286,287],{"class":272},"\"",[266,289,291],{"class":290},"sfazB","gallery",[266,293,287],{"class":272},[266,295,296],{"class":280}," class",[266,298,284],{"class":272},[266,300,287],{"class":272},[266,302,303],{"class":290},"carousel",[266,305,287],{"class":272},[266,307,308],{"class":272},">\n",[266,310,312,315,318,321,323,325,327,330,332,335,339,342,344],{"class":268,"line":311},2,[266,313,314],{"class":272},"  \u003C",[266,316,317],{"class":276},"div",[266,319,320],{"class":280}," data-blossom-slide",[266,322,296],{"class":280},[266,324,284],{"class":272},[266,326,287],{"class":272},[266,328,329],{"class":290},"slide",[266,331,287],{"class":272},[266,333,334],{"class":272},">",[266,336,338],{"class":337},"sTEyZ","Slide 01",[266,340,341],{"class":272},"\u003C\u002F",[266,343,317],{"class":276},[266,345,308],{"class":272},[266,347,349,351,353,355,357,359,361,363,365,367,370,372,374],{"class":268,"line":348},3,[266,350,314],{"class":272},[266,352,317],{"class":276},[266,354,320],{"class":280},[266,356,296],{"class":280},[266,358,284],{"class":272},[266,360,287],{"class":272},[266,362,329],{"class":290},[266,364,287],{"class":272},[266,366,334],{"class":272},[266,368,369],{"class":337},"Slide 02",[266,371,341],{"class":272},[266,373,317],{"class":276},[266,375,308],{"class":272},[266,377,379,381,383,385,387,389,391,393,395,397,400,402,404],{"class":268,"line":378},4,[266,380,314],{"class":272},[266,382,317],{"class":276},[266,384,320],{"class":280},[266,386,296],{"class":280},[266,388,284],{"class":272},[266,390,287],{"class":272},[266,392,329],{"class":290},[266,394,287],{"class":272},[266,396,334],{"class":272},[266,398,399],{"class":337},"Slide 03",[266,401,341],{"class":272},[266,403,317],{"class":276},[266,405,308],{"class":272},[266,407,409],{"class":268,"line":408},5,[266,410,411],{"class":337},"  ...\n",[266,413,415,417,419],{"class":268,"line":414},6,[266,416,341],{"class":272},[266,418,277],{"class":276},[266,420,308],{"class":272},[266,422,424],{"class":268,"line":423},7,[266,425,427],{"emptyLinePlaceholder":426},true,"\n",[266,429,431,433,436,439,441,443,445,447],{"class":268,"line":430},8,[266,432,273],{"class":272},[266,434,435],{"class":276},"BlossomPrev",[266,437,438],{"class":280}," for",[266,440,284],{"class":272},[266,442,287],{"class":272},[266,444,291],{"class":290},[266,446,287],{"class":272},[266,448,449],{"class":272}," \u002F>\n",[266,451,453,455,458,460,462,464,466,468],{"class":268,"line":452},9,[266,454,273],{"class":272},[266,456,457],{"class":276},"BlossomDots",[266,459,438],{"class":280},[266,461,284],{"class":272},[266,463,287],{"class":272},[266,465,291],{"class":290},[266,467,287],{"class":272},[266,469,449],{"class":272},[266,471,473,475,478,480,482,484,486,488],{"class":268,"line":472},10,[266,474,273],{"class":272},[266,476,477],{"class":276},"BlossomNext",[266,479,438],{"class":280},[266,481,284],{"class":272},[266,483,287],{"class":272},[266,485,291],{"class":290},[266,487,287],{"class":272},[266,489,449],{"class":272},[222,491,492,493,496],{},"Mark each slide with ",[226,494,495],{},"data-blossom-slide"," so dot navigation knows which elements to track. You choose how you want to build your slides markup—flat, nested or grouped—and you decide which elements you want to be tracked.",[498,499,501],"h2",{"id":500},"how-they-work","How they work",[222,503,504,505,508,509,512],{},"Under the hood, each control is a native ",[226,506,507],{},"\u003Cbutton type=\"button\">"," wired to the browser's ",[230,510,511],{},"Invoker Commands API",":",[514,515,516,525],"ul",{},[517,518,519,522,523],"li",{},[226,520,521],{},"commandfor"," points at the carousel's ",[226,524,250],{},[517,526,527,530],{},[226,528,529],{},"command"," names the action to perform",[222,532,533,534,537],{},"Blossom uses custom commands in the ",[226,535,536],{},"--blossom-*"," namespace:",[539,540,541,554],"table",{},[542,543,544],"thead",{},[545,546,547,551],"tr",{},[548,549,550],"th",{},"Control",[548,552,553],{},"Command",[555,556,557,567,576],"tbody",{},[545,558,559,562],{},[560,561,435],"td",{},[560,563,564],{},[226,565,566],{},"--blossom-prev",[545,568,569,571],{},[560,570,477],{},[560,572,573],{},[226,574,575],{},"--blossom-next",[545,577,578,586],{},[560,579,580,581,585],{},"BlossomDots (slide ",[582,583,584],"em",{},"n",")",[560,587,588],{},[226,589,590],{},"--blossom-goto-{n}",[222,592,593,594,596,597,600],{},"When you click a control, the browser dispatches a ",[226,595,529],{}," event on the target carousel. Blossom listens for that event and scrolls the container using native ",[226,598,599],{},"Element.scrollIntoView({ behavior: 'smooth', inline: … })",", with full awareness of scroll snap alignment, scroll padding, and RTL direction.",[222,602,603,604,607],{},"If no snap targets are found, it falls back to a proportional ",[226,605,606],{},"scrollBy()",".",[222,609,610,611,613,614,616],{},"The controls and carousel stay decoupled and layout independent. As long as ",[226,612,254],{}," matches the carousel's ",[226,615,250],{}," it works.",[498,618,620],{"id":619},"why-invoker-commands","Why Invoker Commands",[222,622,623,624,627],{},"Blossom is built on a simple idea: ",[230,625,626],{},"enhance native scrolling, don't replace it."," Navigation controls had to follow the same rules and for Blossom to feel like a native element it has to be able to exist on its own.",[222,629,630,631,634],{},"Most carousel libraries expose imperative APIs — grab a ref, call ",[226,632,633],{},".next()",", wire up click handlers in JavaScript or force a template ref around the carousel and controls to create a local scope. These patterns work, but it couples your controls to your component tree and to Blossom's runtime. Invoker Commands invert that: the button declares what it wants to do, the carousel responds.",[222,636,637],{},"The absense of an imperative API also means controls work even when Blossom's drag engine isn't loaded. On touch devices, where Blossom skips the drag bundle entirely, Blossom's navigation controls still scroll the carousel through native behavior.",[222,639,640,641,644],{},"Since Invoker Commands only reached Baseline in early 2026, Blossom still includes a lightweight fallback for browsers without native ",[226,642,643],{},"commandForElement"," support.",[498,646,648],{"id":647},"what-you-dont-have-to-think-about","What you don't have to think about",[222,650,651],{},"The navigation layer handles the details:",[514,653,654,660,666,676],{},[517,655,656,659],{},[230,657,658],{},"Disabled state"," — prev\u002Fnext buttons disable automatically at the first and last slide",[517,661,662,665],{},[230,663,664],{},"Active dot tracking"," — BlossomDots observes scroll position and highlights the current slide",[517,667,668,671,672,675],{},[230,669,670],{},"RTL"," — scroll direction is respected when ",[226,673,674],{},"direction: rtl"," is set on the carousel",[517,677,678,681],{},[230,679,680],{},"Scroll snap"," — navigation finds snap-aligned pages and scrolls to the correct inline position",[222,683,684],{},"You style the controls however you want using simple CSS overwrites and flexible slotted content.",[257,686,688],{"className":259,"code":687,"language":261,"meta":262,"style":262},"\u003C!-- using a slotted svg icon -->\n\u003CBlossomPrev for=\"gallery\">\n  \u003Csvg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\">\n    \u003Cpath d=\"m12 19-7-7 7-7\" \u002F>\n    \u003Cpath d=\"M19 12H5\" \u002F>\n  \u003C\u002Fsvg>\n\u003C\u002FBlossomPrev>\n\n\u003C!-- Thumbnail navigation using Vue's passthrough slots -->\n\u003CBlossomDots for=\"gallery\">\n  \u003Ctemplate #default=\"{ index, active }\">\n    \u003Cimg :class=\"{ active }\" :src=\"thumbnails[i]\" \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002FBlossomDots>\n",[226,689,690,696,714,759,781,800,809,817,821,826,844,866,900,909],{"__ignoreMap":262},[266,691,692],{"class":268,"line":269},[266,693,695],{"class":694},"sHwdD","\u003C!-- using a slotted svg icon -->\n",[266,697,698,700,702,704,706,708,710,712],{"class":268,"line":311},[266,699,273],{"class":272},[266,701,435],{"class":276},[266,703,438],{"class":280},[266,705,284],{"class":272},[266,707,287],{"class":272},[266,709,291],{"class":290},[266,711,287],{"class":272},[266,713,308],{"class":272},[266,715,716,718,721,724,726,728,731,733,736,738,740,743,745,748,750,752,755,757],{"class":268,"line":348},[266,717,314],{"class":272},[266,719,720],{"class":276},"svg",[266,722,723],{"class":280}," viewBox",[266,725,284],{"class":272},[266,727,287],{"class":272},[266,729,730],{"class":290},"0 0 24 24",[266,732,287],{"class":272},[266,734,735],{"class":280}," fill",[266,737,284],{"class":272},[266,739,287],{"class":272},[266,741,742],{"class":290},"none",[266,744,287],{"class":272},[266,746,747],{"class":280}," stroke",[266,749,284],{"class":272},[266,751,287],{"class":272},[266,753,754],{"class":290},"currentColor",[266,756,287],{"class":272},[266,758,308],{"class":272},[266,760,761,764,767,770,772,774,777,779],{"class":268,"line":378},[266,762,763],{"class":272},"    \u003C",[266,765,766],{"class":276},"path",[266,768,769],{"class":280}," d",[266,771,284],{"class":272},[266,773,287],{"class":272},[266,775,776],{"class":290},"m12 19-7-7 7-7",[266,778,287],{"class":272},[266,780,449],{"class":272},[266,782,783,785,787,789,791,793,796,798],{"class":268,"line":408},[266,784,763],{"class":272},[266,786,766],{"class":276},[266,788,769],{"class":280},[266,790,284],{"class":272},[266,792,287],{"class":272},[266,794,795],{"class":290},"M19 12H5",[266,797,287],{"class":272},[266,799,449],{"class":272},[266,801,802,805,807],{"class":268,"line":414},[266,803,804],{"class":272},"  \u003C\u002F",[266,806,720],{"class":276},[266,808,308],{"class":272},[266,810,811,813,815],{"class":268,"line":423},[266,812,341],{"class":272},[266,814,435],{"class":276},[266,816,308],{"class":272},[266,818,819],{"class":268,"line":430},[266,820,427],{"emptyLinePlaceholder":426},[266,822,823],{"class":268,"line":452},[266,824,825],{"class":694},"\u003C!-- Thumbnail navigation using Vue's passthrough slots -->\n",[266,827,828,830,832,834,836,838,840,842],{"class":268,"line":472},[266,829,273],{"class":272},[266,831,457],{"class":276},[266,833,438],{"class":280},[266,835,284],{"class":272},[266,837,287],{"class":272},[266,839,291],{"class":290},[266,841,287],{"class":272},[266,843,308],{"class":272},[266,845,847,849,852,855,857,859,862,864],{"class":268,"line":846},11,[266,848,314],{"class":272},[266,850,851],{"class":276},"template",[266,853,854],{"class":280}," #default",[266,856,284],{"class":272},[266,858,287],{"class":272},[266,860,861],{"class":290},"{ index, active }",[266,863,287],{"class":272},[266,865,308],{"class":272},[266,867,869,871,874,877,879,881,884,886,889,891,893,896,898],{"class":268,"line":868},12,[266,870,763],{"class":272},[266,872,873],{"class":276},"img",[266,875,876],{"class":280}," :class",[266,878,284],{"class":272},[266,880,287],{"class":272},[266,882,883],{"class":290},"{ active }",[266,885,287],{"class":272},[266,887,888],{"class":280}," :src",[266,890,284],{"class":272},[266,892,287],{"class":272},[266,894,895],{"class":290},"thumbnails[i]",[266,897,287],{"class":272},[266,899,449],{"class":272},[266,901,903,905,907],{"class":268,"line":902},13,[266,904,804],{"class":272},[266,906,851],{"class":276},[266,908,308],{"class":272},[266,910,912,914,916],{"class":268,"line":911},14,[266,913,341],{"class":272},[266,915,457],{"class":276},[266,917,308],{"class":272},[919,920],"hr",{},[222,922,923],{},[230,924,925],{},"Explore further:",[514,927,928,935],{},[517,929,930,934],{},[931,932,933],"a",{"href":87},"Buttons example"," — prev\u002Fnext controls with CSS and Tailwind",[517,936,937,940],{},[931,938,939],{"href":92},"Dots example"," — dot navigation and custom dot UI",[942,943,944],"style",{},"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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":262,"searchDepth":311,"depth":311,"links":946},[947,948,949],{"id":500,"depth":311,"text":501},{"id":619,"depth":311,"text":620},{"id":647,"depth":311,"text":648},"2026-06-17","How BlossomPrev, BlossomNext, and BlossomDots use declarative browser commands to navigate native scroll containers without refs or imperative APIs.","md",{"image":954},"\u002Fimages\u002Fabstract\u002Fblossom04.png","\u002Fblog\u002Fnavigation-controls-invoker-commands",{"title":217,"description":951},"blog\u002F1.navigation-controls-invoker-commands","-cMC8Y5qnwHEXRzQYU6fjI6LB03BDZn4AyPEVpaU2Wc",1783981854690]