CarouselLayout
function CarouselLayout(__namedParameters): Element;Defined in: packages/react/src/components/layout/CarouselLayout.tsx:50
The CarouselLayout component displays a list of tracks in a scroll container. It will display as many tiles as possible and overflow the rest.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | CarouselLayoutProps |
Returns
Element
Example
// Basic — show camera tracks in a carousel.
const tracks = useTracks([Track.Source.Camera]);
<CarouselLayout tracks={tracks}>
<ParticipantTile />
</CarouselLayout>;
// Advanced — use a side carousel beside a focused track.
function FocusedRoom() {
const tracks = useTracks([Track.Source.Camera]);
const [focus, ...others] = tracks;
return (
<VoiceRoom agent={agent}>
<FocusLayout trackRef={focus} />
<CarouselLayout tracks={others} orientation="vertical">
<ParticipantTile />
</CarouselLayout>
</VoiceRoom>
);
}