Taiga UI 5 is out!

Carousel CORE

Examples API GitHub

On this page

Generic swipeable container to scroll through content

Basic

Minimal implementation with limits.
01
    
      
    

      
      
    

  
    
      <button
    appearance="action"
    iconStart="@tui.chevron-left"
    tuiIconButton
    type="button"
    [disabled]="index() === 0"
    (click)="carousel.prev()"
>
    Previous
</button>
<tui-carousel
    #carousel
    [max]="5"
    [min]="0"
    [(index)]="index"
>
    <ng-container *tuiItem="let index">{{ index }}</ng-container>
</tui-carousel>
<button
    appearance="action"
    iconStart="@tui.chevron-right"
    tuiIconButton
    type="button"
    [disabled]="index() === 5"
    (click)="carousel.next()"
>
    Next
</button>

    

      
      
    

  
    
      :host {
    display: grid;
    gap: 1rem;
    grid-template-columns: min-content 1fr min-content;
    font: var(--tui-typography-heading-h3);
}

Looped

Infinite loop with seamless transitions.
Editor WYSIWYG
Taiga UI Angular UI Kit
Maskito Masking library
    
      
    

      
      
    

  
    
      <tui-carousel [style.inline-size.rem]="12">
    <section
        *tuiItem="let index"
        appearance="neutral"
        tuiCardMedium
    >
        @let current = items.at(index % items.length);
        <span [tuiAvatar]="current?.icon"></span>
        <footer tuiTitle>
            {{ current?.title }}
            <span tuiSubtitle>{{ current?.subtitle }}</span>
        </footer>
    </section>
</tui-carousel>

Automatic

Scrolling to the next slide after timeout.
Editor WYSIWYG
Taiga UI Angular UI Kit
Maskito Masking library
    
      
    

      
      
    

  
    
      <tui-carousel
    #carousel="tuiCarousel"
    [duration]="5000"
    [(index)]="index"
>
    <section
        *tuiItem="let index"
        appearance="neutral"
        tuiCardMedium
    >
        @let current = items.at(index % items.length);
        <span [tuiAvatar]="current?.icon"></span>
        <footer tuiTitle>
            {{ current?.title }}
            <span tuiSubtitle>{{ current?.subtitle }}</span>
        </footer>
    </section>
</tui-carousel>
<tui-pager
    [count]="items.length"
    [index]="clamped()"
    [valueContent]="content"
/>

<ng-template
    #content
    let-current
>
    <progress
        max="100"
        size="s"
        tuiProgressBar
        class="progress"
        [class.progress_active]="clamped() === current"
        [value]="clamped() === current && !isE2E ? carousel.progress() : 0"
    ></progress>
</ng-template>

    

      
      
    

  
    
      @import '@taiga-ui/styles/utils.less';

:host {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    inline-size: 12rem;
}

.progress {
    .transition(all);

    inline-size: 1rem;

    &:not(&_active) {
        inline-size: 0.5rem;
        color: transparent;
    }
}

Dynamic height

Carousel automatically transitions height of the container.
Slide 1
Lorem ipsum dolor sit amet
Slide 2
Lorem Ipsum is simply dummy text of the printing and typesetting industry 
    
      
    

      
      
    

  
    
      <tui-carousel
    [max]="4"
    [min]="0"
    [style.inline-size.rem]="17"
>
    <section
        *tuiItem="let index"
        appearance="neutral"
        tuiCardLarge="compact"
        [style.inline-size.%]="90"
    >
        <header tuiHeader>Slide {{ index + 1 }}</header>
        {{ texts[index] }}
    </section>
</tui-carousel>

Multiple

Multiple items per slide.
VladimirPotekhinNikitaBarsukovMaxIvanovGermanPanovAlexInkinVladimirPotekhinNikitaBarsukovMaxIvanovGermanPanovAlexInkinVladimirPotekhinNikitaBarsukov
    
      
    

      
      
    

  
    
      <tui-carousel>
    <ng-template
        let-index
        tuiItem
    >
        @for (_ of '-'.repeat(4); track $index) {
            @let item = items.at((index * 4 + $index) % this.items.length);
            <tui-avatar-labeled [label]="item?.label || ''">
                <span tuiAvatar>
                    <img
                        alt=""
                        [src]="item?.avatar"
                    />
                </span>
            </tui-avatar-labeled>
        }
    </ng-template>
</tui-carousel>

    

      
      
    

  
    
      tui-carousel {
    inline-size: 16rem;
}

tui-avatar-labeled {
    inline-size: 4rem;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
GitHub StackBlitz