Körsatiş · compound
Karusel
Slaydlar karuseli (APG carousel): scroll-snap — barmoq bilan suriş brauzerning özida; oldingi/keyingi tugmalar, nuqtalar (tab), ixtiyoriy avto-öynatiş (data-autoplay, siçqonça/fokus ustida pauza, «Pauza» tugmasi). Kamaytirilgan harakatda avto-öynatiş yöq. Kiçik rasmlar navigatsiyasi (4.159): .fx-carousel__thumbs — nuqtalar örnida pastdagi rasmlar qatori (mahsulot sahifasi), joriysi çegara bilan. M3 turlari (4.160, data-layout): multi — bir vaqtda bir neçta slayd (katta + kiçik), hero — bitta katta slayd va yonida tor köriniş, full — çetdan çetga (ekran eni); çekkaga yaqinlaşgan slayd torayadi (scroll-driven, harakat kamaytirilsa — öçadi).
%22%2F%3E%3Ctext%20x%3D%22320%22%20y%3D%22214%22%20font-family%3D%22sans-serif%22%20font-size%3D%2244%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EBozor%3C%2Ftext%3E%3C%2Fsvg%3E)
%22%2F%3E%3Ctext%20x%3D%22320%22%20y%3D%22214%22%20font-family%3D%22sans-serif%22%20font-size%3D%2244%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EOmbor%3C%2Ftext%3E%3C%2Fsvg%3E)
%22%2F%3E%3Ctext%20x%3D%22320%22%20y%3D%22214%22%20font-family%3D%22sans-serif%22%20font-size%3D%2244%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EOfis%3C%2Ftext%3E%3C%2Fsvg%3E)
%22%2F%3E%3Ctext%20x%3D%22320%22%20y%3D%22214%22%20font-family%3D%22sans-serif%22%20font-size%3D%2244%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EStudiya%3C%2Ftext%3E%3C%2Fsvg%3E)
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-peek | on keyingi slayd çekkasi körinadi | off |
data-autoplay | ms millisekund, masalan 5000 | off |
data-layout | single bitta slayd (standart)multi M3 multi-browsehero M3 herofull M3 full-screen — çetdan çetga | single |
Anatomiya
- root
.fx-carouselşart - viewport
.fx-carousel__viewportşart - slide
.fx-carousel__slideşart - controls
.fx-carousel__controlsixtiyoriy - button
.fx-carousel__btnixtiyoriy - dots
.fx-carousel__dotsixtiyoriy - dot
.fx-carousel__dotixtiyoriy - play
.fx-carousel__playixtiyoriy - thumbs
.fx-carousel__thumbsixtiyoriy - thumb
.fx-carousel__thumbixtiyoriy
Holatlar
active-dotdisabled
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| ← → | Oldingi/keyingi slayd (viewport yoki nuqtalarda) |
| Home End | Birinçi/oxirgi slayd (nuqtalarda) |
| Tab | Tugmalar va nuqtalar orasida |
role=region + aria-roledescription=karusel; har slayd role=group «n / jami»; nuqtalar tablist; avto-öynaşda aria-live=off, qölda — polite.
Naqş: WAI-ARIA APG carousel · rol region
Kod
AI uçun: qaçon işlatiladi
Işlating
- Bir joyda bir neçta teng huquqli slayd (suratlar, tavsiyalar) ketma-ket körsatilganda.
npx foxui add carousel
<div class="fx-carousel" data-fx-carousel data-autoplay="6000" data-loop aria-label="Loyiha suratlari" style="max-inline-size: 30rem">
<div class="fx-carousel__viewport">
<div class="fx-carousel__slide"><figure class="fx-image" data-ratio="16/9"><div class="fx-image__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20400%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23e8875a%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23c2410c%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22640%22%20height%3D%22400%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%22320%22%20y%3D%22214%22%20font-family%3D%22sans-serif%22%20font-size%3D%2244%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EBozor%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Bozor"></div></figure></div>
<div class="fx-carousel__slide"><figure class="fx-image" data-ratio="16/9"><div class="fx-image__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20400%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%235a8be8%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%231d4ed8%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22640%22%20height%3D%22400%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%22320%22%20y%3D%22214%22%20font-family%3D%22sans-serif%22%20font-size%3D%2244%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EOmbor%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Ombor"></div></figure></div>
<div class="fx-carousel__slide"><figure class="fx-image" data-ratio="16/9"><div class="fx-image__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20400%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%234fb286%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23047857%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22640%22%20height%3D%22400%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%22320%22%20y%3D%22214%22%20font-family%3D%22sans-serif%22%20font-size%3D%2244%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EOfis%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Ofis"></div></figure></div>
<div class="fx-carousel__slide"><figure class="fx-image" data-ratio="16/9"><div class="fx-image__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20400%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23a78bfa%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%236d28d9%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22640%22%20height%3D%22400%22%20fill%3D%22url(%23g)%22%2F%3E%3Ctext%20x%3D%22320%22%20y%3D%22214%22%20font-family%3D%22sans-serif%22%20font-size%3D%2244%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EStudiya%3C%2Ftext%3E%3C%2Fsvg%3E" alt="Studiya"></div></figure></div>
</div>
<div class="fx-carousel__controls">
<button class="fx-carousel__btn" type="button" data-dir="prev" aria-label="Oldingi slayd">‹</button>
<div class="fx-carousel__dots"></div>
<button class="fx-carousel__btn" type="button" data-dir="next" aria-label="Keyingi slayd">›</button>
<button class="fx-carousel__btn fx-carousel__play" type="button">Pauza</button>
</div>
</div>
<!-- Kichik rasmlar (4.159) -->
<div class="fx-carousel" data-fx-carousel aria-label="Çarm sumka suratlari" style="max-inline-size: 30rem">
<div class="fx-carousel__viewport">
<div class="fx-carousel__slide"><figure class="fx-image" data-ratio="16/9"><div class="fx-image__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20640%20400%22%3E%3Crect%20width%3D%22640%22%20height%3D%22400%22%20fill%3D%22%23d9cbb8%22/%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22200%22%20r%3D%22110%22%20fill%3D%22%23a8916f%22/%3E%3Ctext%20x%3D%22320%22%20y%3D%22214%22%20font-family%3D%22sans-serif%22%20font-size%3D%2240%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EOld%20tomoni%3C/text%3E%3C/svg%3E" alt="Çarm sumka — old tomoni"></div></figure></div>
<div class="fx-carousel__slide"><figure class="fx-image" data-ratio="16/9"><div class="fx-image__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20640%20400%22%3E%3Crect%20width%3D%22640%22%20height%3D%22400%22%20fill%3D%22%23c9d3dc%22/%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22200%22%20r%3D%22110%22%20fill%3D%22%237d8fa1%22/%3E%3Ctext%20x%3D%22320%22%20y%3D%22214%22%20font-family%3D%22sans-serif%22%20font-size%3D%2240%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EYon%20tomoni%3C/text%3E%3C/svg%3E" alt="Çarm sumka — yon tomoni"></div></figure></div>
<div class="fx-carousel__slide"><figure class="fx-image" data-ratio="16/9"><div class="fx-image__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20640%20400%22%3E%3Crect%20width%3D%22640%22%20height%3D%22400%22%20fill%3D%22%23d6d0e4%22/%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22200%22%20r%3D%22110%22%20fill%3D%22%238f84ad%22/%3E%3Ctext%20x%3D%22320%22%20y%3D%22214%22%20font-family%3D%22sans-serif%22%20font-size%3D%2240%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EIchki%20qismi%3C/text%3E%3C/svg%3E" alt="Çarm sumka — içki qismi"></div></figure></div>
<div class="fx-carousel__slide"><figure class="fx-image" data-ratio="16/9"><div class="fx-image__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20640%20400%22%3E%3Crect%20width%3D%22640%22%20height%3D%22400%22%20fill%3D%22%23cfdccb%22/%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22200%22%20r%3D%22110%22%20fill%3D%22%237f9b78%22/%3E%3Ctext%20x%3D%22320%22%20y%3D%22214%22%20font-family%3D%22sans-serif%22%20font-size%3D%2240%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EO%CA%BBlchami%3C/text%3E%3C/svg%3E" alt="Çarm sumka — ölçami"></div></figure></div>
</div>
<div class="fx-carousel__thumbs" aria-label="Suratni tanlaş">
<button class="fx-carousel__thumb" type="button"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20640%20400%22%3E%3Crect%20width%3D%22640%22%20height%3D%22400%22%20fill%3D%22%23d9cbb8%22/%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22200%22%20r%3D%22110%22%20fill%3D%22%23a8916f%22/%3E%3Ctext%20x%3D%22320%22%20y%3D%22214%22%20font-family%3D%22sans-serif%22%20font-size%3D%2240%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EOld%20tomoni%3C/text%3E%3C/svg%3E" alt="Old tomoni"></button>
<button class="fx-carousel__thumb" type="button"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20640%20400%22%3E%3Crect%20width%3D%22640%22%20height%3D%22400%22%20fill%3D%22%23c9d3dc%22/%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22200%22%20r%3D%22110%22%20fill%3D%22%237d8fa1%22/%3E%3Ctext%20x%3D%22320%22%20y%3D%22214%22%20font-family%3D%22sans-serif%22%20font-size%3D%2240%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EYon%20tomoni%3C/text%3E%3C/svg%3E" alt="Yon tomoni"></button>
<button class="fx-carousel__thumb" type="button"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20640%20400%22%3E%3Crect%20width%3D%22640%22%20height%3D%22400%22%20fill%3D%22%23d6d0e4%22/%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22200%22%20r%3D%22110%22%20fill%3D%22%238f84ad%22/%3E%3Ctext%20x%3D%22320%22%20y%3D%22214%22%20font-family%3D%22sans-serif%22%20font-size%3D%2240%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EIchki%20qismi%3C/text%3E%3C/svg%3E" alt="Içki qismi"></button>
<button class="fx-carousel__thumb" type="button"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20640%20400%22%3E%3Crect%20width%3D%22640%22%20height%3D%22400%22%20fill%3D%22%23cfdccb%22/%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22200%22%20r%3D%22110%22%20fill%3D%22%237f9b78%22/%3E%3Ctext%20x%3D%22320%22%20y%3D%22214%22%20font-family%3D%22sans-serif%22%20font-size%3D%2240%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EO%CA%BBlchami%3C/text%3E%3C/svg%3E" alt="Ölçami"></button>
</div>
</div>
<!-- M3 turlari (4.160): multi-browse — chekkadagi slaydlar torayadi -->
<div class="fx-carousel" data-fx-carousel data-layout="multi" aria-label="Sayohat paketlari" style="max-inline-size: 36rem">
<div class="fx-carousel__viewport">
<div class="fx-carousel__slide"><figure class="fx-image" data-ratio="4/3"><div class="fx-image__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%20300%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23b4876a%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22160%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3ESamarqand%3C/text%3E%3C/svg%3E" alt="Samarqand — sayohat paketi"></div></figure></div>
<div class="fx-carousel__slide"><figure class="fx-image" data-ratio="4/3"><div class="fx-image__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%20300%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%236a8fb4%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22160%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EBuxoro%3C/text%3E%3C/svg%3E" alt="Buxoro — sayohat paketi"></div></figure></div>
<div class="fx-carousel__slide"><figure class="fx-image" data-ratio="4/3"><div class="fx-image__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%20300%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%237aa37a%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22160%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EXiva%3C/text%3E%3C/svg%3E" alt="Xiva — sayohat paketi"></div></figure></div>
<div class="fx-carousel__slide"><figure class="fx-image" data-ratio="4/3"><div class="fx-image__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%20300%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23a383b8%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22160%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3EFarg%CA%BBona%3C/text%3E%3C/svg%3E" alt="Farğona — sayohat paketi"></div></figure></div>
<div class="fx-carousel__slide"><figure class="fx-image" data-ratio="4/3"><div class="fx-image__frame"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%20300%22%3E%3Crect%20width%3D%22400%22%20height%3D%22300%22%20fill%3D%22%23c49a4e%22/%3E%3Ctext%20x%3D%22200%22%20y%3D%22160%22%20font-family%3D%22sans-serif%22%20font-size%3D%2230%22%20text-anchor%3D%22middle%22%20fill%3D%22white%22%3ETermiz%3C/text%3E%3C/svg%3E" alt="Termiz — sayohat paketi"></div></figure></div>
</div>
<div class="fx-carousel__controls">
<button class="fx-carousel__btn" type="button" data-dir="prev" aria-label="Oldingi slayd">‹</button>
<button class="fx-carousel__btn" type="button" data-dir="next" aria-label="Keyingi slayd">›</button>
</div>
</div>Tokenlar: --fx-bg-brand-solid --fx-bg-muted --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-control-h-lg --fx-control-h-sm --fx-ease-emphasized --fx-ease-standard --fx-font-size-md --fx-font-size-xs --fx-motion-base --fx-motion-fast --fx-motion-instant --fx-motion-press --fx-radius-circle --fx-radius-control --fx-radius-surface --fx-size-status-dot --fx-space-1 --fx-space-2 --fx-space-3 --fx-text-disabled --fx-text-primary
Şu toifadan
Nişon kartasiYutuq nişoni: belgi (emoji yoki ikon) + nom + sabab.BiriktirmaFayl yoki rasm kartoçkasi: belgi (tur) yoki rasm, nom, hajm, olib taşlaş ×, yuklaniş çiziği.Audio pleyerIxçam audio pleyer: ijro tugmasi, sarlavha, tölqinsimon progress (bosib yoki ← → bilan suriladi), vaqt va tezlik (1× · 1,5× · 2×).AvatarKvadrat avatar: ikki harf yoki surat, 6 toifa rangi, 3 ölçam (sm 22 · md 36 · lg 56), ixtiyoriy holat nuqtasi (active — puls, waiting, stopped, idle).Belgi (badge)Holat yoki toifa yorliği.Boğlovçi nurIntegratsiya va ma'lumot oqimi sxemasi (4.70): tugunlar (logo yoki ikon) orasida yumşoq egri çiziq, ustidan yuguruvçi nur yönalişni körsatadi.