[{"data":1,"prerenderedAt":1652},["ShallowReactive",2],{"navigation_docs":3,"-docs-examples-basic-thumbnails":215,"-docs-examples-basic-thumbnails-surround":1647},[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":96,"body":217,"description":1638,"extension":1639,"links":1640,"meta":1641,"navigation":1642,"path":97,"seo":1643,"stem":98,"__hash__":1646},"docs\u002Fdocs\u002F3.examples\u002F1.basic\u002F8.thumbnails.md",{"type":218,"value":219,"toc":1636},"minimark",[220,223,1632],[221,222],"example-thumbnails",{},[224,225,226,1052,1293],"code-group",{},[227,228,234],"pre",{"className":229,"code":230,"filename":231,"language":232,"meta":233,"style":233},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const slides = document.querySelectorAll(\".slide\");\nconst thumbnails = document.querySelectorAll(\".thumbnail\");\nlet activeIndex = 0;\nconst intersectionRatioBySlide = new WeakMap\u003CElement, number>();\n\nconst observer = new IntersectionObserver(\n  (entries) => {\n    for (const entry of entries) {\n      intersectionRatioBySlide.set(\n        entry.target,\n        entry.isIntersecting ? entry.intersectionRatio : 0,\n      );\n    }\n\n    const mostVisible = Array.from(slides).reduce(\n      (current, slide, index) => {\n        const ratio = intersectionRatioBySlide.get(slide) ?? 0;\n        return ratio > current.ratio ? { index, ratio } : current;\n      },\n      { index: activeIndex, ratio: 0 },\n    );\n\n    if (mostVisible.ratio > 0) {\n      activeIndex = mostVisible.index;\n      thumbnails.forEach((thumb, i) =>\n        thumb.classList.toggle(\"active\", i === activeIndex),\n      );\n    }\n  },\n  { threshold: [0, 0.5, 1] },\n);\n\nslides.forEach((slide) => observer.observe(slide));\n\nthumbnails.forEach((thumbnail, index) => {\n  thumbnail.addEventListener(\"click\", () => {\n    slides[index]?.scrollIntoView({\n      behavior: \"smooth\",\n      block: \"nearest\",\n      inline: \"center\",\n    });\n  });\n});\n",".ts","ts","",[235,236,237,282,311,328,365,372,390,408,436,449,463,490,498,504,509,543,568,601,640,646,671,679,684,707,724,752,790,797,802,808,841,848,853,885,890,917,946,970,988,1005,1022,1032,1042],"code",{"__ignoreMap":233},[238,239,242,246,250,254,257,260,264,267,270,274,276,279],"span",{"class":240,"line":241},"line",1,[238,243,245],{"class":244},"spNyl","const",[238,247,249],{"class":248},"sTEyZ"," slides ",[238,251,253],{"class":252},"sMK4o","=",[238,255,256],{"class":248}," document",[238,258,259],{"class":252},".",[238,261,263],{"class":262},"s2Zo4","querySelectorAll",[238,265,266],{"class":248},"(",[238,268,269],{"class":252},"\"",[238,271,273],{"class":272},"sfazB",".slide",[238,275,269],{"class":252},[238,277,278],{"class":248},")",[238,280,281],{"class":252},";\n",[238,283,285,287,290,292,294,296,298,300,302,305,307,309],{"class":240,"line":284},2,[238,286,245],{"class":244},[238,288,289],{"class":248}," thumbnails ",[238,291,253],{"class":252},[238,293,256],{"class":248},[238,295,259],{"class":252},[238,297,263],{"class":262},[238,299,266],{"class":248},[238,301,269],{"class":252},[238,303,304],{"class":272},".thumbnail",[238,306,269],{"class":252},[238,308,278],{"class":248},[238,310,281],{"class":252},[238,312,314,317,320,322,326],{"class":240,"line":313},3,[238,315,316],{"class":244},"let",[238,318,319],{"class":248}," activeIndex ",[238,321,253],{"class":252},[238,323,325],{"class":324},"sbssI"," 0",[238,327,281],{"class":252},[238,329,331,333,336,338,341,344,347,351,354,357,360,363],{"class":240,"line":330},4,[238,332,245],{"class":244},[238,334,335],{"class":248}," intersectionRatioBySlide ",[238,337,253],{"class":252},[238,339,340],{"class":252}," new",[238,342,343],{"class":262}," WeakMap",[238,345,346],{"class":252},"\u003C",[238,348,350],{"class":349},"sBMFI","Element",[238,352,353],{"class":252},",",[238,355,356],{"class":349}," number",[238,358,359],{"class":252},">",[238,361,362],{"class":248},"()",[238,364,281],{"class":252},[238,366,368],{"class":240,"line":367},5,[238,369,371],{"emptyLinePlaceholder":370},true,"\n",[238,373,375,377,380,382,384,387],{"class":240,"line":374},6,[238,376,245],{"class":244},[238,378,379],{"class":248}," observer ",[238,381,253],{"class":252},[238,383,340],{"class":252},[238,385,386],{"class":262}," IntersectionObserver",[238,388,389],{"class":248},"(\n",[238,391,393,396,400,402,405],{"class":240,"line":392},7,[238,394,395],{"class":252},"  (",[238,397,399],{"class":398},"sHdIc","entries",[238,401,278],{"class":252},[238,403,404],{"class":244}," =>",[238,406,407],{"class":252}," {\n",[238,409,411,415,419,421,424,427,430,433],{"class":240,"line":410},8,[238,412,414],{"class":413},"s7zQu","    for",[238,416,418],{"class":417},"swJcz"," (",[238,420,245],{"class":244},[238,422,423],{"class":248}," entry",[238,425,426],{"class":252}," of",[238,428,429],{"class":248}," entries",[238,431,432],{"class":417},") ",[238,434,435],{"class":252},"{\n",[238,437,439,442,444,447],{"class":240,"line":438},9,[238,440,441],{"class":248},"      intersectionRatioBySlide",[238,443,259],{"class":252},[238,445,446],{"class":262},"set",[238,448,389],{"class":417},[238,450,452,455,457,460],{"class":240,"line":451},10,[238,453,454],{"class":248},"        entry",[238,456,259],{"class":252},[238,458,459],{"class":248},"target",[238,461,462],{"class":252},",\n",[238,464,466,468,470,473,476,478,480,483,486,488],{"class":240,"line":465},11,[238,467,454],{"class":248},[238,469,259],{"class":252},[238,471,472],{"class":248},"isIntersecting",[238,474,475],{"class":252}," ?",[238,477,423],{"class":248},[238,479,259],{"class":252},[238,481,482],{"class":248},"intersectionRatio",[238,484,485],{"class":252}," :",[238,487,325],{"class":324},[238,489,462],{"class":252},[238,491,493,496],{"class":240,"line":492},12,[238,494,495],{"class":417},"      )",[238,497,281],{"class":252},[238,499,501],{"class":240,"line":500},13,[238,502,503],{"class":252},"    }\n",[238,505,507],{"class":240,"line":506},14,[238,508,371],{"emptyLinePlaceholder":370},[238,510,512,515,518,521,524,526,529,531,534,536,538,541],{"class":240,"line":511},15,[238,513,514],{"class":244},"    const",[238,516,517],{"class":248}," mostVisible",[238,519,520],{"class":252}," =",[238,522,523],{"class":248}," Array",[238,525,259],{"class":252},[238,527,528],{"class":262},"from",[238,530,266],{"class":417},[238,532,533],{"class":248},"slides",[238,535,278],{"class":417},[238,537,259],{"class":252},[238,539,540],{"class":262},"reduce",[238,542,389],{"class":417},[238,544,546,549,552,554,557,559,562,564,566],{"class":240,"line":545},16,[238,547,548],{"class":252},"      (",[238,550,551],{"class":398},"current",[238,553,353],{"class":252},[238,555,556],{"class":398}," slide",[238,558,353],{"class":252},[238,560,561],{"class":398}," index",[238,563,278],{"class":252},[238,565,404],{"class":244},[238,567,407],{"class":252},[238,569,571,574,577,579,582,584,587,589,592,594,597,599],{"class":240,"line":570},17,[238,572,573],{"class":244},"        const",[238,575,576],{"class":248}," ratio",[238,578,520],{"class":252},[238,580,581],{"class":248}," intersectionRatioBySlide",[238,583,259],{"class":252},[238,585,586],{"class":262},"get",[238,588,266],{"class":417},[238,590,591],{"class":248},"slide",[238,593,432],{"class":417},[238,595,596],{"class":252},"??",[238,598,325],{"class":324},[238,600,281],{"class":252},[238,602,604,607,609,612,615,617,620,622,625,627,629,631,634,636,638],{"class":240,"line":603},18,[238,605,606],{"class":413},"        return",[238,608,576],{"class":248},[238,610,611],{"class":252}," >",[238,613,614],{"class":248}," current",[238,616,259],{"class":252},[238,618,619],{"class":248},"ratio",[238,621,475],{"class":252},[238,623,624],{"class":252}," {",[238,626,561],{"class":248},[238,628,353],{"class":252},[238,630,576],{"class":248},[238,632,633],{"class":252}," }",[238,635,485],{"class":252},[238,637,614],{"class":248},[238,639,281],{"class":252},[238,641,643],{"class":240,"line":642},19,[238,644,645],{"class":252},"      },\n",[238,647,649,652,654,657,660,662,664,666,668],{"class":240,"line":648},20,[238,650,651],{"class":252},"      {",[238,653,561],{"class":417},[238,655,656],{"class":252},":",[238,658,659],{"class":248}," activeIndex",[238,661,353],{"class":252},[238,663,576],{"class":417},[238,665,656],{"class":252},[238,667,325],{"class":324},[238,669,670],{"class":252}," },\n",[238,672,674,677],{"class":240,"line":673},21,[238,675,676],{"class":417},"    )",[238,678,281],{"class":252},[238,680,682],{"class":240,"line":681},22,[238,683,371],{"emptyLinePlaceholder":370},[238,685,687,690,692,695,697,699,701,703,705],{"class":240,"line":686},23,[238,688,689],{"class":413},"    if",[238,691,418],{"class":417},[238,693,694],{"class":248},"mostVisible",[238,696,259],{"class":252},[238,698,619],{"class":248},[238,700,611],{"class":252},[238,702,325],{"class":324},[238,704,432],{"class":417},[238,706,435],{"class":252},[238,708,710,713,715,717,719,722],{"class":240,"line":709},24,[238,711,712],{"class":248},"      activeIndex",[238,714,520],{"class":252},[238,716,517],{"class":248},[238,718,259],{"class":252},[238,720,721],{"class":248},"index",[238,723,281],{"class":252},[238,725,727,730,732,735,737,739,742,744,747,749],{"class":240,"line":726},25,[238,728,729],{"class":248},"      thumbnails",[238,731,259],{"class":252},[238,733,734],{"class":262},"forEach",[238,736,266],{"class":417},[238,738,266],{"class":252},[238,740,741],{"class":398},"thumb",[238,743,353],{"class":252},[238,745,746],{"class":398}," i",[238,748,278],{"class":252},[238,750,751],{"class":244}," =>\n",[238,753,755,758,760,763,765,768,770,772,775,777,779,781,784,786,788],{"class":240,"line":754},26,[238,756,757],{"class":248},"        thumb",[238,759,259],{"class":252},[238,761,762],{"class":248},"classList",[238,764,259],{"class":252},[238,766,767],{"class":262},"toggle",[238,769,266],{"class":417},[238,771,269],{"class":252},[238,773,774],{"class":272},"active",[238,776,269],{"class":252},[238,778,353],{"class":252},[238,780,746],{"class":248},[238,782,783],{"class":252}," ===",[238,785,659],{"class":248},[238,787,278],{"class":417},[238,789,462],{"class":252},[238,791,793,795],{"class":240,"line":792},27,[238,794,495],{"class":417},[238,796,281],{"class":252},[238,798,800],{"class":240,"line":799},28,[238,801,503],{"class":252},[238,803,805],{"class":240,"line":804},29,[238,806,807],{"class":252},"  },\n",[238,809,811,814,817,819,822,825,827,830,832,835,838],{"class":240,"line":810},30,[238,812,813],{"class":252},"  {",[238,815,816],{"class":417}," threshold",[238,818,656],{"class":252},[238,820,821],{"class":248}," [",[238,823,824],{"class":324},"0",[238,826,353],{"class":252},[238,828,829],{"class":324}," 0.5",[238,831,353],{"class":252},[238,833,834],{"class":324}," 1",[238,836,837],{"class":248},"] ",[238,839,840],{"class":252},"},\n",[238,842,844,846],{"class":240,"line":843},31,[238,845,278],{"class":248},[238,847,281],{"class":252},[238,849,851],{"class":240,"line":850},32,[238,852,371],{"emptyLinePlaceholder":370},[238,854,856,858,860,862,864,866,868,870,872,875,877,880,883],{"class":240,"line":855},33,[238,857,533],{"class":248},[238,859,259],{"class":252},[238,861,734],{"class":262},[238,863,266],{"class":248},[238,865,266],{"class":252},[238,867,591],{"class":398},[238,869,278],{"class":252},[238,871,404],{"class":244},[238,873,874],{"class":248}," observer",[238,876,259],{"class":252},[238,878,879],{"class":262},"observe",[238,881,882],{"class":248},"(slide))",[238,884,281],{"class":252},[238,886,888],{"class":240,"line":887},34,[238,889,371],{"emptyLinePlaceholder":370},[238,891,893,896,898,900,902,904,907,909,911,913,915],{"class":240,"line":892},35,[238,894,895],{"class":248},"thumbnails",[238,897,259],{"class":252},[238,899,734],{"class":262},[238,901,266],{"class":248},[238,903,266],{"class":252},[238,905,906],{"class":398},"thumbnail",[238,908,353],{"class":252},[238,910,561],{"class":398},[238,912,278],{"class":252},[238,914,404],{"class":244},[238,916,407],{"class":252},[238,918,920,923,925,928,930,932,935,937,939,942,944],{"class":240,"line":919},36,[238,921,922],{"class":248},"  thumbnail",[238,924,259],{"class":252},[238,926,927],{"class":262},"addEventListener",[238,929,266],{"class":417},[238,931,269],{"class":252},[238,933,934],{"class":272},"click",[238,936,269],{"class":252},[238,938,353],{"class":252},[238,940,941],{"class":252}," ()",[238,943,404],{"class":244},[238,945,407],{"class":252},[238,947,949,952,955,957,960,963,966,968],{"class":240,"line":948},37,[238,950,951],{"class":248},"    slides",[238,953,954],{"class":417},"[",[238,956,721],{"class":248},[238,958,959],{"class":417},"]",[238,961,962],{"class":252},"?.",[238,964,965],{"class":262},"scrollIntoView",[238,967,266],{"class":417},[238,969,435],{"class":252},[238,971,973,976,978,981,984,986],{"class":240,"line":972},38,[238,974,975],{"class":417},"      behavior",[238,977,656],{"class":252},[238,979,980],{"class":252}," \"",[238,982,983],{"class":272},"smooth",[238,985,269],{"class":252},[238,987,462],{"class":252},[238,989,991,994,996,998,1001,1003],{"class":240,"line":990},39,[238,992,993],{"class":417},"      block",[238,995,656],{"class":252},[238,997,980],{"class":252},[238,999,1000],{"class":272},"nearest",[238,1002,269],{"class":252},[238,1004,462],{"class":252},[238,1006,1008,1011,1013,1015,1018,1020],{"class":240,"line":1007},40,[238,1009,1010],{"class":417},"      inline",[238,1012,656],{"class":252},[238,1014,980],{"class":252},[238,1016,1017],{"class":272},"center",[238,1019,269],{"class":252},[238,1021,462],{"class":252},[238,1023,1025,1028,1030],{"class":240,"line":1024},41,[238,1026,1027],{"class":252},"    }",[238,1029,278],{"class":417},[238,1031,281],{"class":252},[238,1033,1035,1038,1040],{"class":240,"line":1034},42,[238,1036,1037],{"class":252},"  }",[238,1039,278],{"class":417},[238,1041,281],{"class":252},[238,1043,1045,1048,1050],{"class":240,"line":1044},43,[238,1046,1047],{"class":252},"}",[238,1049,278],{"class":248},[238,1051,281],{"class":252},[227,1053,1058],{"className":1054,"code":1055,"filename":1056,"language":1057,"meta":233,"style":233},"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  scroll-snap-type: x mandatory;\n  aspect-ratio: 1;\n  max-width: 20rem;\n}\n\n.slide {\n  width: 100%;\n  scroll-snap-align: center;\n}\n\n.thumbnails {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n.thumbnail {\n  opacity: 0.4;\n}\n\n.thumbnail.active {\n  opacity: 1;\n}\n",".css","css",[235,1059,1060,1069,1082,1094,1106,1118,1129,1141,1146,1150,1158,1169,1181,1185,1189,1197,1208,1219,1231,1235,1239,1247,1259,1263,1267,1279,1289],{"__ignoreMap":233},[238,1061,1062,1064,1067],{"class":240,"line":241},[238,1063,259],{"class":252},[238,1065,1066],{"class":349},"carousel",[238,1068,407],{"class":252},[238,1070,1071,1075,1077,1080],{"class":240,"line":284},[238,1072,1074],{"class":1073},"sqsOY","  display",[238,1076,656],{"class":252},[238,1078,1079],{"class":248}," grid",[238,1081,281],{"class":252},[238,1083,1084,1087,1089,1092],{"class":240,"line":313},[238,1085,1086],{"class":1073},"  grid-auto-flow",[238,1088,656],{"class":252},[238,1090,1091],{"class":248}," column",[238,1093,281],{"class":252},[238,1095,1096,1099,1101,1104],{"class":240,"line":330},[238,1097,1098],{"class":1073},"  grid-auto-columns",[238,1100,656],{"class":252},[238,1102,1103],{"class":324}," 100%",[238,1105,281],{"class":252},[238,1107,1108,1111,1113,1116],{"class":240,"line":367},[238,1109,1110],{"class":1073},"  scroll-snap-type",[238,1112,656],{"class":252},[238,1114,1115],{"class":248}," x mandatory",[238,1117,281],{"class":252},[238,1119,1120,1123,1125,1127],{"class":240,"line":374},[238,1121,1122],{"class":1073},"  aspect-ratio",[238,1124,656],{"class":252},[238,1126,834],{"class":324},[238,1128,281],{"class":252},[238,1130,1131,1134,1136,1139],{"class":240,"line":392},[238,1132,1133],{"class":1073},"  max-width",[238,1135,656],{"class":252},[238,1137,1138],{"class":324}," 20rem",[238,1140,281],{"class":252},[238,1142,1143],{"class":240,"line":410},[238,1144,1145],{"class":252},"}\n",[238,1147,1148],{"class":240,"line":438},[238,1149,371],{"emptyLinePlaceholder":370},[238,1151,1152,1154,1156],{"class":240,"line":451},[238,1153,259],{"class":252},[238,1155,591],{"class":349},[238,1157,407],{"class":252},[238,1159,1160,1163,1165,1167],{"class":240,"line":465},[238,1161,1162],{"class":1073},"  width",[238,1164,656],{"class":252},[238,1166,1103],{"class":324},[238,1168,281],{"class":252},[238,1170,1171,1174,1176,1179],{"class":240,"line":492},[238,1172,1173],{"class":1073},"  scroll-snap-align",[238,1175,656],{"class":252},[238,1177,1178],{"class":248}," center",[238,1180,281],{"class":252},[238,1182,1183],{"class":240,"line":500},[238,1184,1145],{"class":252},[238,1186,1187],{"class":240,"line":506},[238,1188,371],{"emptyLinePlaceholder":370},[238,1190,1191,1193,1195],{"class":240,"line":511},[238,1192,259],{"class":252},[238,1194,895],{"class":349},[238,1196,407],{"class":252},[238,1198,1199,1201,1203,1206],{"class":240,"line":545},[238,1200,1074],{"class":1073},[238,1202,656],{"class":252},[238,1204,1205],{"class":248}," flex",[238,1207,281],{"class":252},[238,1209,1210,1213,1215,1217],{"class":240,"line":570},[238,1211,1212],{"class":1073},"  flex-direction",[238,1214,656],{"class":252},[238,1216,1091],{"class":248},[238,1218,281],{"class":252},[238,1220,1221,1224,1226,1229],{"class":240,"line":603},[238,1222,1223],{"class":1073},"  gap",[238,1225,656],{"class":252},[238,1227,1228],{"class":324}," 0.25rem",[238,1230,281],{"class":252},[238,1232,1233],{"class":240,"line":642},[238,1234,1145],{"class":252},[238,1236,1237],{"class":240,"line":648},[238,1238,371],{"emptyLinePlaceholder":370},[238,1240,1241,1243,1245],{"class":240,"line":673},[238,1242,259],{"class":252},[238,1244,906],{"class":349},[238,1246,407],{"class":252},[238,1248,1249,1252,1254,1257],{"class":240,"line":681},[238,1250,1251],{"class":1073},"  opacity",[238,1253,656],{"class":252},[238,1255,1256],{"class":324}," 0.4",[238,1258,281],{"class":252},[238,1260,1261],{"class":240,"line":686},[238,1262,1145],{"class":252},[238,1264,1265],{"class":240,"line":709},[238,1266,371],{"emptyLinePlaceholder":370},[238,1268,1269,1271,1273,1275,1277],{"class":240,"line":726},[238,1270,259],{"class":252},[238,1272,906],{"class":349},[238,1274,259],{"class":252},[238,1276,774],{"class":349},[238,1278,407],{"class":252},[238,1280,1281,1283,1285,1287],{"class":240,"line":754},[238,1282,1251],{"class":1073},[238,1284,656],{"class":252},[238,1286,834],{"class":324},[238,1288,281],{"class":252},[238,1290,1291],{"class":240,"line":792},[238,1292,1145],{"class":252},[227,1294,1299],{"className":1295,"code":1296,"filename":1297,"language":1298,"meta":233,"style":233},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CBlossomCarousel class=\"carousel\">\n  \u003Cdiv class=\"slide\">\u003Cimg src=\"...\" alt=\"\" \u002F>\u003C\u002Fdiv>\n  \u003Cdiv class=\"slide\">\u003Cimg src=\"...\" alt=\"\" \u002F>\u003C\u002Fdiv>\n  \u003Cdiv class=\"slide\">\u003Cimg src=\"...\" alt=\"\" \u002F>\u003C\u002Fdiv>\n  ...\n\u003C\u002FBlossomCarousel>\n\n\u003Cdiv class=\"thumbnails\">\n  \u003Cbutton class=\"thumbnail\">\u003Cimg src=\"...\" alt=\"\" \u002F>\u003C\u002Fbutton>\n  \u003Cbutton class=\"thumbnail\">\u003Cimg src=\"...\" alt=\"\" \u002F>\u003C\u002Fbutton>\n  \u003Cbutton class=\"thumbnail\">\u003Cimg src=\"...\" alt=\"\" \u002F>\u003C\u002Fbutton>\n  ...\n\u003C\u002Fdiv>\n",".html","html",[235,1300,1301,1322,1373,1415,1457,1462,1471,1475,1493,1536,1578,1620,1624],{"__ignoreMap":233},[238,1302,1303,1305,1308,1311,1313,1315,1317,1319],{"class":240,"line":241},[238,1304,346],{"class":252},[238,1306,1307],{"class":417},"BlossomCarousel",[238,1309,1310],{"class":244}," class",[238,1312,253],{"class":252},[238,1314,269],{"class":252},[238,1316,1066],{"class":272},[238,1318,269],{"class":252},[238,1320,1321],{"class":252},">\n",[238,1323,1324,1327,1330,1332,1334,1336,1338,1340,1343,1346,1349,1351,1353,1356,1358,1361,1363,1366,1369,1371],{"class":240,"line":284},[238,1325,1326],{"class":252},"  \u003C",[238,1328,1329],{"class":417},"div",[238,1331,1310],{"class":244},[238,1333,253],{"class":252},[238,1335,269],{"class":252},[238,1337,591],{"class":272},[238,1339,269],{"class":252},[238,1341,1342],{"class":252},">\u003C",[238,1344,1345],{"class":417},"img",[238,1347,1348],{"class":244}," src",[238,1350,253],{"class":252},[238,1352,269],{"class":252},[238,1354,1355],{"class":272},"...",[238,1357,269],{"class":252},[238,1359,1360],{"class":244}," alt",[238,1362,253],{"class":252},[238,1364,1365],{"class":252},"\"\"",[238,1367,1368],{"class":252}," \u002F>\u003C\u002F",[238,1370,1329],{"class":417},[238,1372,1321],{"class":252},[238,1374,1375,1377,1379,1381,1383,1385,1387,1389,1391,1393,1395,1397,1399,1401,1403,1405,1407,1409,1411,1413],{"class":240,"line":313},[238,1376,1326],{"class":252},[238,1378,1329],{"class":417},[238,1380,1310],{"class":244},[238,1382,253],{"class":252},[238,1384,269],{"class":252},[238,1386,591],{"class":272},[238,1388,269],{"class":252},[238,1390,1342],{"class":252},[238,1392,1345],{"class":417},[238,1394,1348],{"class":244},[238,1396,253],{"class":252},[238,1398,269],{"class":252},[238,1400,1355],{"class":272},[238,1402,269],{"class":252},[238,1404,1360],{"class":244},[238,1406,253],{"class":252},[238,1408,1365],{"class":252},[238,1410,1368],{"class":252},[238,1412,1329],{"class":417},[238,1414,1321],{"class":252},[238,1416,1417,1419,1421,1423,1425,1427,1429,1431,1433,1435,1437,1439,1441,1443,1445,1447,1449,1451,1453,1455],{"class":240,"line":330},[238,1418,1326],{"class":252},[238,1420,1329],{"class":417},[238,1422,1310],{"class":244},[238,1424,253],{"class":252},[238,1426,269],{"class":252},[238,1428,591],{"class":272},[238,1430,269],{"class":252},[238,1432,1342],{"class":252},[238,1434,1345],{"class":417},[238,1436,1348],{"class":244},[238,1438,253],{"class":252},[238,1440,269],{"class":252},[238,1442,1355],{"class":272},[238,1444,269],{"class":252},[238,1446,1360],{"class":244},[238,1448,253],{"class":252},[238,1450,1365],{"class":252},[238,1452,1368],{"class":252},[238,1454,1329],{"class":417},[238,1456,1321],{"class":252},[238,1458,1459],{"class":240,"line":367},[238,1460,1461],{"class":248},"  ...\n",[238,1463,1464,1467,1469],{"class":240,"line":374},[238,1465,1466],{"class":252},"\u003C\u002F",[238,1468,1307],{"class":417},[238,1470,1321],{"class":252},[238,1472,1473],{"class":240,"line":392},[238,1474,371],{"emptyLinePlaceholder":370},[238,1476,1477,1479,1481,1483,1485,1487,1489,1491],{"class":240,"line":410},[238,1478,346],{"class":252},[238,1480,1329],{"class":417},[238,1482,1310],{"class":244},[238,1484,253],{"class":252},[238,1486,269],{"class":252},[238,1488,895],{"class":272},[238,1490,269],{"class":252},[238,1492,1321],{"class":252},[238,1494,1495,1497,1500,1502,1504,1506,1508,1510,1512,1514,1516,1518,1520,1522,1524,1526,1528,1530,1532,1534],{"class":240,"line":438},[238,1496,1326],{"class":252},[238,1498,1499],{"class":417},"button",[238,1501,1310],{"class":244},[238,1503,253],{"class":252},[238,1505,269],{"class":252},[238,1507,906],{"class":272},[238,1509,269],{"class":252},[238,1511,1342],{"class":252},[238,1513,1345],{"class":417},[238,1515,1348],{"class":244},[238,1517,253],{"class":252},[238,1519,269],{"class":252},[238,1521,1355],{"class":272},[238,1523,269],{"class":252},[238,1525,1360],{"class":244},[238,1527,253],{"class":252},[238,1529,1365],{"class":252},[238,1531,1368],{"class":252},[238,1533,1499],{"class":417},[238,1535,1321],{"class":252},[238,1537,1538,1540,1542,1544,1546,1548,1550,1552,1554,1556,1558,1560,1562,1564,1566,1568,1570,1572,1574,1576],{"class":240,"line":451},[238,1539,1326],{"class":252},[238,1541,1499],{"class":417},[238,1543,1310],{"class":244},[238,1545,253],{"class":252},[238,1547,269],{"class":252},[238,1549,906],{"class":272},[238,1551,269],{"class":252},[238,1553,1342],{"class":252},[238,1555,1345],{"class":417},[238,1557,1348],{"class":244},[238,1559,253],{"class":252},[238,1561,269],{"class":252},[238,1563,1355],{"class":272},[238,1565,269],{"class":252},[238,1567,1360],{"class":244},[238,1569,253],{"class":252},[238,1571,1365],{"class":252},[238,1573,1368],{"class":252},[238,1575,1499],{"class":417},[238,1577,1321],{"class":252},[238,1579,1580,1582,1584,1586,1588,1590,1592,1594,1596,1598,1600,1602,1604,1606,1608,1610,1612,1614,1616,1618],{"class":240,"line":465},[238,1581,1326],{"class":252},[238,1583,1499],{"class":417},[238,1585,1310],{"class":244},[238,1587,253],{"class":252},[238,1589,269],{"class":252},[238,1591,906],{"class":272},[238,1593,269],{"class":252},[238,1595,1342],{"class":252},[238,1597,1345],{"class":417},[238,1599,1348],{"class":244},[238,1601,253],{"class":252},[238,1603,269],{"class":252},[238,1605,1355],{"class":272},[238,1607,269],{"class":252},[238,1609,1360],{"class":244},[238,1611,253],{"class":252},[238,1613,1365],{"class":252},[238,1615,1368],{"class":252},[238,1617,1499],{"class":417},[238,1619,1321],{"class":252},[238,1621,1622],{"class":240,"line":492},[238,1623,1461],{"class":248},[238,1625,1626,1628,1630],{"class":240,"line":500},[238,1627,1466],{"class":252},[238,1629,1329],{"class":417},[238,1631,1321],{"class":252},[1633,1634,1635],"style",{},"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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 .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}",{"title":233,"searchDepth":284,"depth":284,"links":1637},[],"Add interactive thumbnail navigation with IntersectionObserver.","md",null,{},{"icon":99},{"title":1644,"description":1645},"Thumbnails carousel example with Blossom Carousel","Add interactive thumbnail navigation to Blossom Carousel slides using IntersectionObserver.","0mseQCQRkEeWvfHA54cesMvuSAcy4g3mR7DKOIUNB04",[1648,1650],{"title":91,"path":92,"stem":93,"description":1649,"icon":94,"children":-1},"Add interactive dot markers with IntersectionObserver.",{"title":106,"path":107,"stem":108,"description":1651,"icon":109,"children":-1},"Create a cover-flow carousel effect with CSS scroll-driven animations.",1780251487582]