TkxCarousel

Single slide with dots

Spring blossoms

Mountain at dawn

Forest path

Desert sunset

Twilight harbour

Spring blossoms

Mountain at dawn

import { TkxCarousel, TkxCarouselSlide } from 'tekivex-ui';

<TkxCarousel>
  <TkxCarouselSlide>
    <img src="/slide-1.jpg" alt="Mountain at dawn" />
  </TkxCarouselSlide>
  <TkxCarouselSlide>
    <img src="/slide-2.jpg" alt="Forest path" />
  </TkxCarouselSlide>
  <TkxCarouselSlide>
    <img src="/slide-3.jpg" alt="Coastline" />
  </TkxCarouselSlide>
</TkxCarousel>

Autoplay

Autoplay (pauses on hover/focus)

Pause

Spring blossoms

Mountain at dawn

Forest path

Desert sunset

Twilight harbour

Spring blossoms

Mountain at dawn

<TkxCarousel autoplay autoplayInterval={5000} pauseOnHover>
  {/* slides */}
</TkxCarousel>

Autoplay pauses on hover, focus, AND when the user prefers reduced motion (prefers-reduced-motion: reduce is automatic).

Indicators

<TkxCarousel indicators="dots">    {/* default — small dots */}
<TkxCarousel indicators="bars">    {/* progress bars */}
<TkxCarousel indicators="numbers"> {/* "1 / 5" counter */}
<TkxCarousel indicators="none">    {/* no indicators */}

Multi-slide view

Show multiple slides at once (e.g. product cards):

<TkxCarousel slidesPerView={3} gap={16}>
  {products.map(p => (
    <TkxCarouselSlide key={p.id}>
      <ProductCard product={p} />
    </TkxCarouselSlide>
  ))}
</TkxCarousel>

slidesPerView accepts a number or a responsive object:

<TkxCarousel
  slidesPerView={{ base: 1, md: 2, lg: 3, xl: 4 }}
  gap={16}
>

Loop

<TkxCarousel loop>
  {/* infinite loop — going past the last slide returns to the first */}
</TkxCarousel>

Controlled

const [active, setActive] = useState(0);

<TkxCarousel active={active} onChange={setActive}>
  {/* … */}
</TkxCarousel>

Accessibility — what’s automatic

• Carousel container: role="region" + aria-roledescription="carousel"
• Each slide: role="group" + aria-roledescription="slide" + aria-label="Slide N of M"
• Live region announces slide changes to screen readers
• Previous / Next buttons with localised aria-labels
• Indicator buttons have aria-current="true" on the active one
• Keyboard:
  • Left / Right — previous / next slide
  • Home / End — first / last slide
• Pause on focus — autoplay always pauses when keyboard focus enters the carousel (required for WCAG 2.2.2)

Image alts are required

Every <img> inside a carousel slide MUST have a meaningful alt. Empty alt="" is appropriate only when the image is purely decorative — but a decorative image probably doesn’t belong in a carousel.

Props

TkxCarousel

Prop	Type	Required	Description
autoplay	boolean		Defaults to false.
autoplayInterval	number		ms between slides. Defaults to 5000.
pauseOnHover	boolean		Defaults to true when autoplay is on.
loop	boolean		Wrap from last to first slide.
slidesPerView	number | Record<Breakpoint, number>		Defaults to 1.
gap	number		Gap between slides in px.
indicators	'dots' | 'bars' | 'numbers' | 'none'		Defaults to dots.
active	number		Controlled active slide index.
onChange	(index: number) => void		Active slide change.

Source

src/components/TkxCarousel.tsx