Carousel with default indicators

import { Box } from '@semcore/ui/base-components';
import Carousel from '@semcore/ui/carousel';
import React from 'react';

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 = () => (
  <Box w={width}>
    <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

            role='button'
            src={url}
            aria-label={`Open in fullscreen ${altTexts[index]}`}
            style={{ width: '100%' }}
          />
        </Carousel.Item>
      ))}
    </Carousel>
  </Box>
);

export default Demo;

Carousel with preview indicators

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

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

          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 Carousel from '@semcore/ui/carousel';
import React from 'react';

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

          role='button'
          src={url}
          alt={altTexts[index]}
          aria-label={`Open in fullscreen ${altTexts[index]}`}
          style={{ height: '100%', width: '100%', objectFit: 'cover' }}
        />
      </Carousel.Item>
    ))}
  </Carousel>
);

export default Demo;

Carousel without prev/next buttons

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

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>
        <Carousel.ContentBox>
          <Carousel.Container>
            {images.map((url, index) => (
              <Carousel.Item key={url} w={imageWidth}>
                <img

                  role='button'
                  src={url}
                  alt={altTexts[index]}
                  aria-label={`Open in fullscreen ${altTexts[index]}`}
                  style={{ width: '100%' }}
                />
              </Carousel.Item>
            ))}
          </Carousel.Container>
        </Carousel.ContentBox>
      </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>