Skip to main content

Carousel

The TkCarousel is a content slider component with various options.

import { TkCarousel } from '@takeoff-ui/react'

Basic​

A simple TkCarousel is created by giving content as children.

Slide 1Slide 2Slide 3
View Code
<TkCarousel>
  <img src="https://picsum.photos/800/400?random=1" alt="Slide 1" />
  <img src="https://picsum.photos/800/400?random=2" alt="Slide 2" />
  <img src="https://picsum.photos/800/400?random=3" alt="Slide 3" />
</TkCarousel>

Items Per View​

You can set the number of slides visible at once using the itemsPerView property.

Slide 1Slide 2Slide 3Slide 4Slide 5Slide 6
View Code
<TkCarousel itemsPerView={4}>
  <img src="https://picsum.photos/800/400?random=1" alt="Slide 1" />
  <img src="https://picsum.photos/800/400?random=2" alt="Slide 2" />
  <img src="https://picsum.photos/800/400?random=3" alt="Slide 3" />
  <img src="https://picsum.photos/800/400?random=4" alt="Slide 4" />
  <img src="https://picsum.photos/800/400?random=5" alt="Slide 5" />
  <img src="https://picsum.photos/800/400?random=6" alt="Slide 6" />
</TkCarousel>

Circular​

You can enable or disable circular scrolling by setting the circular property. By default, it is set to true.

Slide 1Slide 2Slide 3Slide 4
View Code
<TkCarousel circular={true} itemsPerView={2}>
  <img src="https://picsum.photos/800/400?random=1" alt="Slide 1" />
  <img src="https://picsum.photos/800/400?random=2" alt="Slide 2" />
  <img src="https://picsum.photos/800/400?random=3" alt="Slide 3" />
  <img src="https://picsum.photos/800/400?random=4" alt="Slide 4" />
</TkCarousel>

Autoplay​

You can enable autoplay functionality by setting the autoplay property to true. Circular will be enabled automatically when autoplay is activated. Delay between slides can be customized using the autoplayDelay property, which defaults to 3000 milliseconds.

Slide 1Slide 2Slide 3Slide 4Slide 5Slide 6
View Code
<TkCarousel autoplay={true} autoplayDelay={1000} itemsPerView={3}>
  <img src="https://picsum.photos/800/400?random=1" alt="Slide 1" />
  <img src="https://picsum.photos/800/400?random=2" alt="Slide 2" />
  <img src="https://picsum.photos/800/400?random=3" alt="Slide 3" />
  <img src="https://picsum.photos/800/400?random=4" alt="Slide 4" />
  <img src="https://picsum.photos/800/400?random=5" alt="Slide 5" />
  <img src="https://picsum.photos/800/400?random=6" alt="Slide 6" />
</TkCarousel>

You can customize the placement and the position of the navigation arrows using the navigationPlacement and navigationPosition properties.

Navigation Placement

Navigation Position

Slide 1Slide 2Slide 3Slide 4Slide 5
View Code

Player Button​

You can show or hide the play/pause button using the howPlayerToggleButton property. By default, it is set to false.

Slide 1Slide 2Slide 3Slide 4Slide 5Slide 6
View Code
<TkCarousel 
  navigationPlacement="outside" 
  autoplay={true} 
  showPlayerToggleButton={true} 
  itemsPerView={3}
>
  <img src="https://picsum.photos/800/400?random=1" alt="Slide 1" />
  <img src="https://picsum.photos/800/400?random=2" alt="Slide 2" />
  <img src="https://picsum.photos/800/400?random=3" alt="Slide 3" />
  <img src="https://picsum.photos/800/400?random=4" alt="Slide 4" />
  <img src="https://picsum.photos/800/400?random=5" alt="Slide 5" />
  <img src="https://picsum.photos/800/400?random=6" alt="Slide 6" />
</TkCarousel>

Hide Indicator and Arrows​

You can enable or disable the indicator and navigation arrows using the showIndicator and showArrows properties. By default, both are set to true.

Slide 1Slide 2Slide 3Slide 4
View Code
<TkCarousel showIndicators={false} showArrows={false} autoplay={true} itemsPerView={3}>
  <img src="https://picsum.photos/800/400?random=1" alt="Slide 1" />
  <img src="https://picsum.photos/800/400?random=2" alt="Slide 2" />
  <img src="https://picsum.photos/800/400?random=3" alt="Slide 3" />
  <img src="https://picsum.photos/800/400?random=4" alt="Slide 4" />
</TkCarousel>

Vertical​

You can set the orientation of the carousel using the orientation property. It can be either horizontal or vertical. When set to vertical, you should also specify the height of the carousel using the verticalViewHeight property.

Slide 1Slide 2Slide 3Slide 4Slide 5
View Code
<TkCarousel orientation='vertical' verticalViewHeight='300px'>
  <img src="https://picsum.photos/800/400?random=1" alt="Slide 1" />
  <img src="https://picsum.photos/800/400?random=2" alt="Slide 2" />
  <img src="https://picsum.photos/800/400?random=3" alt="Slide 3" />
  <img src="https://picsum.photos/800/400?random=4" alt="Slide 4" />
  <img src="https://picsum.photos/800/400?random=5" alt="Slide 5" />
</TkCarousel>

API​

Props​

NameTypeDefaultDescription
booleanfalseControls whether the carousel should autoplay
number3000Controls the interval of the autoplay in milliseconds
booleantrueControls whether it should loop back to the start after reaching the end
number1Number of items to show per view
"inside", "outside"'inside'Placement of the navigation indicators
"bottom", "distributed", "left", "right", "top"'distributed'Position of the navigation indicators
"horizontal", "vertical"'horizontal'Orientation of the carousel
booleantrueControls whether the navigation arrows are shown
booleantrueControls whether the carousel indicators are shown
booleanfalseControls whether the pause/play button is shown
string'300px'Height of the carousel when orientation is vertical

Events​

NameDescription
tk-changeEmitted when item is changed