Carousel

<tx-carousel  ariaLabel="New arrivals"  [value]="products"  [numVisible]="3"  [responsiveOptions]="responsive"  [numScroll]="1"  [(page)]="page">  <ng-template txCarouselItem let-product>    <article class="card">      <img [src]="product.image" alt="" />      <h3>{{ product.name }}</h3>      <div class="row">        <tx-tag [value]="product.tag" severity="secondary" />        <button txButton size="small" (click)="added.set(product.name)">          \${{ product.price }}        </button>      </div>    </article>  </ng-template></tx-carousel><p class="status">Page {{ page() + 1 }} · last added: {{ added() }}</p>

<tx-tabs [tabs]="effects" [(value)]="choice" /><tx-carousel  ariaLabel="Landscapes"  [value]="photos"  [numVisible]="3"  [responsiveOptions]="responsive"  [numScroll]="3"  [effect]="effect()"  circular>  <ng-template txCarouselItem let-photo>    <img class="photo" [src]="photo.src" [alt]="photo.alt" width="1200" height="800" />  </ng-template></tx-carousel>

<tx-carousel  ariaLabel="Prints"  [value]="products"  [numVisible]="4"  [numScroll]="2"  [responsiveOptions]="responsive"  circular>  <ng-template txCarouselItem let-product>    <article class="card">      <img [src]="product.image" alt="" />      <h3>{{ product.name }}</h3>      <span class="price">\${{ product.price }}</span>    </article>  </ng-template></tx-carousel>

<tx-carousel  ariaLabel="Prints"  orientation="vertical"  verticalViewPortHeight="380px"  [value]="products"  [numVisible]="1">  <ng-template txCarouselItem let-product>    <article class="card">      <img [src]="product.image" alt="" />      <h3>{{ product.name }}</h3>      <span class="price">\${{ product.price }}</span>    </article>  </ng-template></tx-carousel>

<tx-carousel  ariaLabel="Landscapes"  [value]="photos"  [autoplayInterval]="3000"  [showNavigators]="false">  <ng-template txCarouselItem let-photo>    <figure class="slide">      <img [src]="photo.src" [alt]="photo.alt" />      <figcaption>{{ photo.title }}</figcaption>    </figure>  </ng-template></tx-carousel><div class="actions">  <button    txButton    size="small"    severity="secondary"    icon="play"    (click)="carousel().startAutoplay()"  >    Play  </button>  <button    txButton    size="small"    severity="secondary"    icon="pause"    (click)="carousel().stopAutoplay()"  >    Pause  </button></div>

<tx-carousel  ariaLabel="Trip photos"  [value]="photos"  [numVisible]="2"  [responsiveOptions]="responsive"  [numScroll]="2"  [(page)]="page"  [dt]="{ indicator: { width: '22px', height: '22px', borderRadius: '50%' } }">  <div txCarouselHeader class="header">    <strong>Trip photos</strong>    <span>{{ photos.length }} photos</span>  </div>  <ng-template txCarouselItem let-photo>    <img class="photo" [src]="photo.src" [alt]="photo.alt" />  </ng-template>  <ng-template txCarouselIndicator let-index let-active="active">    <span class="number" [class.active]="active">{{ index + 1 }}</span>  </ng-template>  <p txCarouselFooter class="footer">Page {{ page() + 1 }} · swipe or use the arrows</p></tx-carousel>

<tx-carousel  ariaLabel="Landscapes"  [value]="photos"  [numVisible]="3"  [responsiveOptions]="responsive"  [dt]="{    root: { slideDuration: '0.3s' },    indicator: {      width: '10px',      height: '10px',      borderRadius: '50%',      activeBackground: 'var(--tx-help-base)',    },  }">  <ng-template txCarouselItem let-photo>    <img class="photo" [src]="photo.src" [alt]="photo.alt" />  </ng-template></tx-carousel>