[{"data":1,"prerenderedAt":278},["ShallowReactive",2],{"docs:\u002Fdocs\u002Fcomponents\u002Fcarousel":3,"component-meta:UiCarousel":139},{"id":4,"title":5,"body":6,"component":123,"dependsOn":124,"description":126,"emitDescriptions":127,"extension":130,"meta":131,"navigation":132,"order":133,"path":134,"seo":135,"status":136,"stem":137,"__hash__":138},"docs\u002Fdocs\u002Fcomponents\u002Fcarousel.md","Carousel",{"type":7,"value":8,"toc":112},"minimark",[9,14,19,23,26,30,34,38,41,45,57,61,68,79,83],[10,11,13],"h2",{"id":12},"приклад","Приклад",[15,16],"component-preview",{"name":17,"stage":18},"carousel-basic","min-h-96",[10,20,22],{"id":21},"api","API",[24,25],"component-api",{},[10,27,29],{"id":28},"коли-використовувати","Коли використовувати",[31,32,33],"p",{},"Для невеликої послідовності промо, onboarding або медіа, де один елемент має\nбути в центрі уваги. Компонент підтримує controlled index і кастомний слот\nслайда.",[10,35,37],{"id":36},"коли-не-використовувати","Коли НЕ використовувати",[31,39,40],{},"Не ховайте критичний контент чи основну навігацію в каруселі. Для списку\nкарток краще звичайна grid, а для великих наборів — pagination.",[10,42,44],{"id":43},"на-мобільних-пристроях","На мобільних пристроях",[31,46,47,48,52,53,56],{},"Основний жест — свайп. Поріг перемикання масштабується від ширини треку\n(15%, але не менше 40px), а швидкий короткий змах (флік до 200 мс) листає\nслайд навіть без «дотягування» — відчуття жесту однакове на телефоні та\nпланшеті. Жест класифікується за домінантною віссю: горизонтальний рух\nведе слайд один-в-один (з гумовими краями без ",[49,50,51],"code",{},"loop","), вертикальний —\nцілком віддається скролу сторінки. Вказівник захоплюється\n",[49,54,55],{},"setPointerCapture",", тож палець, що з'їхав із компонента, не обриває\nперетягування. Другий палець не збиває активний жест. Стрілки навігації на\ncoarse-вказівнику приховані — вони конфліктували б із пальцем поверх\nконтенту; навігація — свайп і крапки-індикатори з зоною дотику 44×44.",[10,58,60],{"id":59},"доступність","Доступність",[31,62,63,64,67],{},"Region і слайди мають carousel-ролі та позицію «N з M». Стрілки, Home й End\nпрацюють із клавіатури. Autoplay зупиняється під час focus і hover, має явну\nкнопку Pause, стає на паузу, доки вкладка у фоні, та не запускається при\n",[49,65,66],{},"prefers-reduced-motion"," — який також вимикає slide-transition переходу.",[31,69,70,71,74,75,78],{},"Перетягування (",[49,72,73],{},"draggable",") — піксель-в-піксель за вказівником; клік одразу\nпісля жесту проковтується, щоб не «натискати» те, що було під пальцем у\nмомент відпускання. ",[49,76,77],{},"touch-pan-y"," лишає вертикальне гортання сторінці, тож\nжест не конфліктує з прокруткою.",[10,80,82],{"id":81},"деталі-реалізації","Деталі реалізації",[31,84,85,86,89,90,93,94,97,98,97,101,97,104,107,108,111],{},"Логіка жесту — чисті функції в ",[49,87,88],{},"app\u002Futils\u002Fcarousel.ts"," (",[49,91,92],{},"dragThreshold",",\n",[49,95,96],{},"dragAxis",", ",[49,99,100],{},"shouldAdvance",[49,102,103],{},"rubberBandDelta",[49,105,106],{},"swipeDirection","), покриті\nтестами без рендеру. Трек зсувається ",[49,109,110],{},"translate3d"," — шар на GPU без\nперестворень на кожному pointermove.",{"title":113,"searchDepth":114,"depth":114,"links":115},"",2,[116,117,118,119,120,121,122],{"id":12,"depth":114,"text":13},{"id":21,"depth":114,"text":22},{"id":28,"depth":114,"text":29},{"id":36,"depth":114,"text":37},{"id":43,"depth":114,"text":44},{"id":59,"depth":114,"text":60},{"id":81,"depth":114,"text":82},"UiCarousel",[125,88],"app\u002Fcomposables\u002FuseReducedMotion.ts","Керована карусель зі swipe, клавіатурою, autoplay-паузою та reduced motion.",{"update:modelValue":128,"change":129},"Індекс активного слайда.","Новий індекс після переходу.","md",{},true,51,"\u002Fdocs\u002Fcomponents\u002Fcarousel",{"title":5,"description":126},"stable","docs\u002Fcomponents\u002Fcarousel","A7ZgPrCv0fNvRjk_ecPovr3FWk_yNbAXfP1stGA3iDk",{"mode":140,"prefetch":141,"preload":141,"filePath":142,"declarationPath":143,"pascalName":123,"kebabName":144,"chunkName":145,"priority":146,"_scanned":132,"meta":147},"all",false,"app\u002Fcomponents\u002Fui\u002FUiCarousel.vue","\u002Fapp\u002Fapp\u002Fcomponents\u002Fui\u002FUiCarousel.vue","ui-carousel","components\u002Fui-carousel",1,{"type":114,"props":148,"slots":201,"events":240,"exposed":252,"hash":277},[149,158,164,169,175,184,190,196],{"name":150,"global":141,"description":151,"tags":152,"required":132,"type":153,"schema":154},"items","Слайди. Рендер кожного — слот `slide`.",[],"T[]",{"kind":155,"type":153,"schema":156},"array",{"0":157},"T",{"name":159,"global":141,"default":160,"description":161,"tags":162,"required":141,"type":163,"schema":163},"modelValue","0","Індекс поточного слайда. Використовуйте через `v-model`.",[],"number",{"name":165,"global":141,"default":166,"description":167,"tags":168,"required":141,"type":163,"schema":163},"interval","5000","Пауза між автоматичними переходами, мс.",[],{"name":170,"global":141,"default":171,"description":172,"tags":173,"required":141,"type":174,"schema":174},"ariaLabel","\"Карусель\"","Доступна назва каруселі.",[],"string",{"name":51,"global":141,"default":176,"description":177,"tags":178,"required":141,"type":179,"schema":180},"false","З останнього слайда переходити на перший.",[],"boolean",{"kind":181,"type":179,"schema":182},"enum",{"0":176,"1":183},"true",{"name":185,"global":141,"default":176,"description":186,"tags":187,"required":141,"type":179,"schema":188},"autoplay","Автоматичне гортання. Вимикається саме собою при\n`prefers-reduced-motion`, на час наведення чи фокуса і доки\nвкладка у фоні.",[],{"kind":181,"type":179,"schema":189},{"0":176,"1":183},{"name":191,"global":141,"default":183,"description":192,"tags":193,"required":141,"type":179,"schema":194},"pauseOnHover","Спинати автогортання під курсором.",[],{"kind":181,"type":179,"schema":195},{"0":176,"1":183},{"name":73,"global":141,"default":183,"description":197,"tags":198,"required":141,"type":179,"schema":199},"Перетягування слайда пальцем або мишею. Вимикайте, коли всередині\nслайда є текст для виділення або поля вводу.",[],{"kind":181,"type":179,"schema":200},{"0":176,"1":183},[202,220,231],{"name":203,"type":204,"description":113,"tags":205,"schema":206},"slide","{ item: T; index: number; active: boolean; }",[],{"kind":207,"type":204,"schema":208},"object",{"item":209,"index":212,"active":215},{"name":210,"global":141,"description":113,"tags":211,"required":132,"type":157,"schema":157},"item",[],{"name":213,"global":141,"description":113,"tags":214,"required":132,"type":163,"schema":163},"index",[],{"name":216,"global":141,"description":113,"tags":217,"required":132,"type":179,"schema":218},"active",[],{"kind":181,"type":179,"schema":219},{"0":176,"1":183},{"name":221,"type":222,"description":113,"tags":223,"schema":224},"previous","{ disabled: boolean; }",[],{"kind":207,"type":222,"schema":225},{"disabled":226},{"name":227,"global":141,"description":113,"tags":228,"required":132,"type":179,"schema":229},"disabled",[],{"kind":181,"type":179,"schema":230},{"0":176,"1":183},{"name":232,"type":222,"description":113,"tags":233,"schema":234},"next",[],{"kind":207,"type":222,"schema":235},{"disabled":236},{"name":227,"global":141,"description":113,"tags":237,"required":132,"type":179,"schema":238},[],{"kind":181,"type":179,"schema":239},{"0":176,"1":183},[241,247],{"name":242,"description":113,"tags":243,"type":244,"signature":245,"schema":246},"update:modelValue",[],"[value: number]","(evt: \"update:modelValue\", value: number): void",[163],{"name":248,"description":113,"tags":249,"type":244,"signature":250,"schema":251},"change",[],"(evt: \"change\", value: number): void",[163],[253,259,262,269,273],{"name":221,"type":254,"description":113,"tags":255,"schema":256},"() => void",[],{"kind":257,"type":258},"event","(): void",{"name":232,"type":254,"description":113,"tags":260,"schema":261},[],{"kind":257,"type":258},{"name":263,"type":264,"description":113,"tags":265,"schema":266},"goTo","(index: number) => void",[],{"kind":257,"type":267,"schema":268},"(index: number): void",{},{"name":270,"type":254,"description":113,"tags":271,"schema":272},"pause",[],{"kind":257,"type":258},{"name":274,"type":254,"description":113,"tags":275,"schema":276},"play",[],{"kind":257,"type":258},"IFn5SAhThgCh-JSWjCV_cnxfcZ2-pEcltiP-77_H9nM",1789660506370]