[{"data":1,"prerenderedAt":413},["ShallowReactive",2],{"navigation":3,"\u002Fopen-source\u002Fcarousel":26,"\u002Fopen-source\u002Fcarousel-surround":409},[4],{"title":5,"path":6,"stem":7,"children":8,"page":25},"Open Source","\u002Fopen-source","open-source",[9,13,17,21],{"title":10,"path":11,"stem":12},"@weburz\u002Fcarousel","\u002Fopen-source\u002Fcarousel","open-source\u002Fcarousel",{"title":14,"path":15,"stem":16},"Crisp","\u002Fopen-source\u002Fcrisp","open-source\u002Fcrisp",{"title":18,"path":19,"stem":20},"@weburz\u002Fparticle-canvas","\u002Fopen-source\u002Fparticle-canvas","open-source\u002Fparticle-canvas",{"title":22,"path":23,"stem":24},"Terox","\u002Fopen-source\u002Fterox","open-source\u002Fterox",false,{"id":27,"title":10,"body":28,"description":390,"extension":391,"icon":392,"links":393,"meta":402,"navigation":403,"path":11,"seo":404,"stem":12,"tags":405,"__hash__":408},"openSource\u002Fopen-source\u002Fcarousel.md",{"type":29,"value":30,"toc":384},"minimark",[31,46,56,61,72,137,141,157,230,233,237,358,365,368,372,380],[32,33,34,37,38,45],"p",{},[35,36,10],"code",{}," is a Nuxt 4 module with drop-in carousels for YouTube,\nInstagram, and TikTok embeds. Buttery\n",[39,40,44],"a",{"href":41,"rel":42},"https:\u002F\u002Fwww.embla-carousel.com\u002F",[43],"nofollow","Embla","-powered sliding, captions that fetch\nthemselves, and videos that actually shut up when you scroll away.",[47,48,49],"blockquote",{},[32,50,51,55],{},[52,53,54],"strong",{},"Status: experimental."," Pre-1.0 — the API may shift.",[57,58,60],"h2",{"id":59},"why-it-exists","Why it exists",[32,62,63,64,67,68,71],{},"Every platform embed is hostile in its own special way: Instagram answers the\nobvious embed URL with ",[35,65,66],{},"X-Frame-Options: DENY",", YouTube ignores your commands\nuntil you whisper the right postMessage handshake, and TikTok's ",[35,69,70],{},"embed.js","\nsleeps through SPA navigations. This module ships all the workarounds so you\ndon't have to earn them the hard way.",[73,74,75,86,92,101,111,114,117],"ul",{},[76,77,78,81,82,85],"li",{},[35,79,80],{},"\u003CBaseCarousel>"," \u002F ",[35,83,84],{},"\u003CBaseSlide>"," — Embla underneath: arrows, dots,\nmulti-slide views, zero jank",[76,87,88,91],{},[35,89,90],{},"\u003CYouTubeCarousel>"," — videos & Shorts; autoplays when scrolled into view,\nmutes\u002Fpauses when scrolled away",[76,93,94,97,98,100],{},[35,95,96],{},"\u003CInstagramCarousel>"," — direct iframes that content blockers can't kill, no\n",[35,99,70],{}," required",[76,102,103,106,107,110],{},[35,104,105],{},"\u003CTikTokCarousel>"," — ",[35,108,109],{},"\u002Fembed\u002Fv2\u002F"," cards whose playback halts the moment\nthey're off-screen",[76,112,113],{},"Captions that write themselves — titles auto-fetched from YouTube\u002FTikTok\noEmbed",[76,115,116],{},"Stacked or magazine-style aside layouts, ~40 CSS variables to theme with",[76,118,119,120,123,124,127,128,123,131,123,134],{},"Auto-imported composables: ",[35,121,122],{},"useCarousel",", ",[35,125,126],{},"useYouTubePlayer",",\n",[35,129,130],{},"useInstagramEmbed",[35,132,133],{},"useTikTokEmbed",[35,135,136],{},"useEmbedMetadata",[57,138,140],{"id":139},"install","Install",[142,143,148],"pre",{"className":144,"code":145,"language":146,"meta":147,"style":147},"language-sh shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add @weburz\u002Fcarousel\n","sh","",[35,149,150],{"__ignoreMap":147},[151,152,155],"span",{"class":153,"line":154},"line",1,[151,156,145],{},[142,158,162],{"className":159,"code":160,"language":161,"meta":147,"style":147},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: [\"@weburz\u002Fcarousel\"],\n});\n","ts",[35,163,164,170,192,218],{"__ignoreMap":147},[151,165,166],{"class":153,"line":154},[151,167,169],{"class":168},"sHwdD","\u002F\u002F nuxt.config.ts\n",[151,171,173,177,180,184,188],{"class":153,"line":172},2,[151,174,176],{"class":175},"s7zQu","export",[151,178,179],{"class":175}," default",[151,181,183],{"class":182},"s2Zo4"," defineNuxtConfig",[151,185,187],{"class":186},"sTEyZ","(",[151,189,191],{"class":190},"sMK4o","{\n",[151,193,195,199,202,205,208,211,213,216],{"class":153,"line":194},3,[151,196,198],{"class":197},"swJcz","  modules",[151,200,201],{"class":190},":",[151,203,204],{"class":186}," [",[151,206,207],{"class":190},"\"",[151,209,10],{"class":210},"sfazB",[151,212,207],{"class":190},[151,214,215],{"class":186},"]",[151,217,127],{"class":190},[151,219,221,224,227],{"class":153,"line":220},4,[151,222,223],{"class":190},"}",[151,225,226],{"class":186},")",[151,228,229],{"class":190},";\n",[32,231,232],{},"That's the whole setup — every component and composable auto-imports in every\nVue file.",[57,234,236],{"id":235},"usage","Usage",[142,238,242],{"className":239,"code":240,"language":241,"meta":147,"style":147},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CYouTubeCarousel\n    :videos=\"[\n      { id: 'dQw4w9WgXcQ', kind: 'video', title: 'Never Gonna Give You Up' },\n      { id: '9bZkp7q19f0', kind: 'shorts', title: 'A short' },\n    ]\"\n    mode=\"player-api\"\n    :autoplay-on-scroll=\"true\"\n    aria-label=\"Featured videos\"\n  \u002F>\n\u003C\u002Ftemplate>\n","vue",[35,243,244,255,263,277,282,288,297,312,327,342,348],{"__ignoreMap":147},[151,245,246,249,252],{"class":153,"line":154},[151,247,248],{"class":190},"\u003C",[151,250,251],{"class":197},"template",[151,253,254],{"class":190},">\n",[151,256,257,260],{"class":153,"line":172},[151,258,259],{"class":190},"  \u003C",[151,261,262],{"class":197},"YouTubeCarousel\n",[151,264,265,269,272,274],{"class":153,"line":194},[151,266,268],{"class":267},"spNyl","    :videos",[151,270,271],{"class":190},"=",[151,273,207],{"class":190},[151,275,276],{"class":210},"[\n",[151,278,279],{"class":153,"line":220},[151,280,281],{"class":210},"      { id: 'dQw4w9WgXcQ', kind: 'video', title: 'Never Gonna Give You Up' },\n",[151,283,285],{"class":153,"line":284},5,[151,286,287],{"class":210},"      { id: '9bZkp7q19f0', kind: 'shorts', title: 'A short' },\n",[151,289,291,294],{"class":153,"line":290},6,[151,292,293],{"class":210},"    ]",[151,295,296],{"class":190},"\"\n",[151,298,300,303,305,307,310],{"class":153,"line":299},7,[151,301,302],{"class":267},"    mode",[151,304,271],{"class":190},[151,306,207],{"class":190},[151,308,309],{"class":210},"player-api",[151,311,296],{"class":190},[151,313,315,318,320,322,325],{"class":153,"line":314},8,[151,316,317],{"class":267},"    :autoplay-on-scroll",[151,319,271],{"class":190},[151,321,207],{"class":190},[151,323,324],{"class":210},"true",[151,326,296],{"class":190},[151,328,330,333,335,337,340],{"class":153,"line":329},9,[151,331,332],{"class":267},"    aria-label",[151,334,271],{"class":190},[151,336,207],{"class":190},[151,338,339],{"class":210},"Featured videos",[151,341,296],{"class":190},[151,343,345],{"class":153,"line":344},10,[151,346,347],{"class":190},"  \u002F>\n",[151,349,351,354,356],{"class":153,"line":350},11,[151,352,353],{"class":190},"\u003C\u002F",[151,355,251],{"class":197},[151,357,254],{"class":190},[32,359,360,361,364],{},"Instagram and TikTok expose no playback control API from outside the iframe,\nso \"pause\" is implemented by unloading the iframe (",[35,362,363],{},"src → about:blank",") and\nrestoring it on return — the embed reloads, but audio never keeps playing\noff-screen.",[32,366,367],{},"The full prop reference — layouts, caption modes, theming variables — lives in\nthe repo README.",[57,369,371],{"id":370},"source","Source",[32,373,374,379],{},[39,375,378],{"href":376,"rel":377},"https:\u002F\u002Fgithub.com\u002FWeburz\u002Fcarousel",[43],"github.com\u002FWeburz\u002Fcarousel"," — MIT\nlicensed.",[381,382,383],"style",{},"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}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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}",{"title":147,"searchDepth":154,"depth":172,"links":385},[386,387,388,389],{"id":59,"depth":172,"text":60},{"id":139,"depth":172,"text":140},{"id":235,"depth":172,"text":236},{"id":370,"depth":172,"text":371},"Drop-in carousels for Nuxt 4 that make YouTube, Instagram, and TikTok embeds behave. Embla-powered.","md","i-simple-icons-nuxt",[394,398],{"label":395,"icon":396,"to":376,"target":397},"GitHub","i-simple-icons-github","_blank",{"label":399,"icon":400,"to":401,"target":397},"npm","i-simple-icons-npm","https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@weburz\u002Fcarousel",{},true,{"title":10,"description":390},[406,407,44],"Nuxt","TypeScript","KfqWni_XrxHwus9q3LXrsupdEVzl-fUTKnrQQnECWKU",[410,411],null,{"title":14,"path":15,"stem":16,"description":412,"children":-1},"A no-nonsense Conventional Commits linter for Git, written in Go. Single binary, no Node required.",1781342884268]