Carousel with default indicators

import React from 'react';
import Carousel from '@semcore/ui/carousel';

const images = [
  'https://picsum.photos/id/1023/600/400',
  'https://picsum.photos/id/1024/600/400',
  'https://picsum.photos/id/1025/600/400',
];
const altTexts = [
  'A cyclist performing stunts in the forest',
  'A vulture flies with its wings spread wide',
  'A pug wrapped in a blanket sits on the road in the forest',
];
const width = 600;
const imageWidth = width - 75;

const Demo = () => (
  <Carousel
    w={width}
    aria-roledescription='carousel'
    aria-label='Beauty of Nature'
    zoom={true}
    zoomWidth={1000}
    indicators='default'
  >
    {images.map((url, index) => (
      <Carousel.Item key={url} w={imageWidth}>
        <img
          // biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole:
          role='button'
          src={url}
          aria-label={`Open in fullscreen ${altTexts[index]}`}
          style={{ width: '100%' }}
        />
      </Carousel.Item>
    ))}
  </Carousel>
);

export default Demo;

Carousel with preview indicators

import React from 'react';
import Carousel from '@semcore/ui/carousel';

const images = [
  'https://picsum.photos/id/1023/600/400',
  'https://picsum.photos/id/1024/600/400',
  'https://picsum.photos/id/1025/600/400',
];
const altTexts = [
  'A cyclist performing stunts in the forest',
  'A vulture flies with its wings spread wide',
  'A pug wrapped in a blanket sits on the road in the forest',
];
const width = 600;
const imageWidth = width - 75;

const Demo = () => (
  <Carousel
    w={width}
    aria-roledescription='carousel'
    aria-label='Beauty of Nature'
    zoom={true}
    zoomWidth={1000}
    indicators='preview'
  >
    {images.map((url, index) => (
      <Carousel.Item key={url} w={imageWidth}>
        <img
          // biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole:
          role='button'
          src={url}
          alt={altTexts[index]}
          aria-label={`Open in fullscreen ${altTexts[index]}`}
          style={{ width: '100%', height: '100%', objectFit: 'cover' }}
        />
      </Carousel.Item>
    ))}
  </Carousel>
);

export default Demo;

Carousel without modal window

import React from 'react';
import Carousel from '@semcore/ui/carousel';

const images = [
  'https://picsum.photos/id/1023/600/400',
  'https://picsum.photos/id/1024/600/400',
  'https://picsum.photos/id/1025/600/400',
];
const altTexts = [
  'A cyclist performing stunts in the forest',
  'A vulture flies with its wings spread wide',
  'A pug wrapped in a blanket sits on the road in the forest',
];
const width = 600;
const imageWidth = width - 75;

const Demo = () => (
  <Carousel
    w={width}
    aria-roledescription='carousel'
    aria-label='Beauty of Nature'
    indicators='preview'
  >
    {images.map((url, index) => (
      <Carousel.Item key={url} w={imageWidth}>
        <img
          // biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole:
          role='button'
          src={url}
          alt={altTexts[index]}
          aria-label={`Open in fullscreen ${altTexts[index]}`}
          style={{ height: '100%', objectFit: 'cover' }}
        />
      </Carousel.Item>
    ))}
  </Carousel>
);

export default Demo;

Carousel without prev/next buttons

import React from 'react';
import { Box, Flex } from '@semcore/ui/flex-box';
import Carousel from '@semcore/ui/carousel';

const images = [
  'https://picsum.photos/id/1023/600/400',
  'https://picsum.photos/id/1024/600/400',
  'https://picsum.photos/id/1025/600/400',
];
const altTexts = [
  'A cyclist performing stunts in the forest',
  'A vulture flies with its wings spread wide',
  'A pug wrapped in a blanket sits on the road in the forest',
];
const width = 600;
const imageWidth = width - 75;

const Demo = () => (
  <Carousel w={width} aria-roledescription='carousel' aria-label='Beauty of Nature'>
    <>
      <Flex>
        <Box style={{ overflow: 'hidden', borderRadius: 6 }}>
          <Carousel.Container>
            {images.map((url, index) => (
              <Carousel.Item key={url} w={imageWidth}>
                <img
                  // biome-ignore lint/a11y/noNoninteractiveElementToInteractiveRole:
                  role='button'
                  src={url}
                  alt={altTexts[index]}
                  aria-label={`Open in fullscreen ${altTexts[index]}`}
                  style={{ width: '100%' }}
                />
              </Carousel.Item>
            ))}
          </Carousel.Container>
        </Box>
      </Flex>
      <Carousel.Indicators />
    </>
  </Carousel>
);

export default Demo;

Hiding nested elements on hidden slides

• ariaHidden controls the element's visibility for screen readers.
• tabIndex determines whether the element is included in the tab sequence on the page.

<Carousel index={index} onIndexChange={handleChangeIndex}>
  <Carousel.Item key={ind} ariaHidden={ind === index}>
    <Image />
    <Button tabIndex={ind === index ? 1 : -1} />
  </Carousel.Item>
</Carousel>