Carousel

A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts. It allows you to focus on a particular content while having a notion of how many you have to explore.

Source Code

uikit-react-core

Landscapes

1 / 7

title

xs

showDots

showSlideControls

showFullscreen

controlsPosition

<HvCarousel 
  title="Landscapes"
  xs={false}
  showDots={false}
  showSlideControls
  showFullscreen
  controlsPosition="top"
>
  <i
    alt="landscape 1"
    src="https://lumada-design.github.io/assets/landscape1.jpg"
  />
  <i
    alt="landscape 2"
    src="https://lumada-design.github.io/assets/landscape2.jpg"
  />
  <i
    alt="landscape 3"
    src="https://lumada-design.github.io/assets/landscape3.jpg"
  />
  <i
    alt="landscape 4"
    src="https://lumada-design.github.io/assets/landscape4.jpg"
  />
  <i
    alt="landscape 5"
    src="https://lumada-design.github.io/assets/landscape5.jpg"
  />
  <i
    alt="landscape 6"
    src="https://lumada-design.github.io/assets/landscape6.jpg"
  />
  <i
    alt="landscape 7"
    src="https://lumada-design.github.io/assets/landscape7.jpg"
  />
</HvCarousel>

<HvCarousel 
  title="Landscapes"
  xs={false}
  showDots={false}
  showSlideControls
  showFullscreen
  controlsPosition="top"
>
  <i
    alt="landscape 1"
    src="https://lumada-design.github.io/assets/landscape1.jpg"
  />
  <i
    alt="landscape 2"
    src="https://lumada-design.github.io/assets/landscape2.jpg"
  />
  <i
    alt="landscape 3"
    src="https://lumada-design.github.io/assets/landscape3.jpg"
  />
  <i
    alt="landscape 4"
    src="https://lumada-design.github.io/assets/landscape4.jpg"
  />
  <i
    alt="landscape 5"
    src="https://lumada-design.github.io/assets/landscape5.jpg"
  />
  <i
    alt="landscape 6"
    src="https://lumada-design.github.io/assets/landscape6.jpg"
  />
  <i
    alt="landscape 7"
    src="https://lumada-design.github.io/assets/landscape7.jpg"
  />
</HvCarousel>

Thumbnails

To display thumbnails below the carousel, you should pass a renderThumbnail function to the HvCarousel component and the hideThumbnail prop should be set to false (its default value). The thumbnailsPosition prop allows you to set the position of the thumbnails, above or below (the default) the images.

1 / 7

export default function Demo() {
  return (
    <HvCarousel
      renderThumbnail={(i) => <img src={images[i]} alt={`thumbnail ${i}`} />}
    >
      {images.map((src, i) => (
        <HvCarouselSlide key={src} src={src} alt={`image ${i}`} />
      ))}
    </HvCarousel>
  );
}


const images = [...Array(7).keys()].map(
  (i) => `https://lumada-design.github.io/assets/landscape${i + 1}.jpg`,
);

export default function Demo() {
  return (
    <HvCarousel
      renderThumbnail={(i) => <img src={images[i]} alt={`thumbnail ${i}`} />}
    >
      {images.map((src, i) => (
        <HvCarouselSlide key={src} src={src} alt={`image ${i}`} />
      ))}
    </HvCarousel>
  );
}

const images = [...Array(7).keys()].map(
  (i) => `https://lumada-design.github.io/assets/landscape${i + 1}.jpg`,
);

Embedded

You can use the HvCarousel component inside other components, like a card. Use the xs prop to make the carousel embeddable.

Star wars characters

1 / 9

1/9

<HvCard bgcolor="atmo1" style={{ width: 300 }}>
  <HvCardHeader title="Star wars characters" />
  <HvCardMedia role="none">
    <HvCarousel xs height={400} showCounter={false} showSlideControls>
      {[
        { name: "DarthVader", src: "https://i.imgur.com/zAeHrRF.jpg" },
        { name: "BobaFett", src: "https://i.imgur.com/0OR7lyx.jpg" },
        { name: "Revan", src: "https://i.imgur.com/WmgIWxw.jpg" },
        { name: "TheMandalorian", src: "https://i.imgur.com/kjPDte9.jpg" },
        { name: "Anakin", src: "https://i.imgur.com/5QbhIqE.jpg" },
        { name: "Ahsoka", src: "https://i.imgur.com/MqqmCWc.jpg" },
        { name: "ObiWan", src: "https://i.imgur.com/zJe518o.png" },
        { name: "Mace", src: "https://i.imgur.com/wgeZ4uO.jpg" },
        { name: "Yoda", src: "https://i.imgur.com/65lzJlV.jpg" },
      ].map(({ src, name }) => (
        <HvCarouselSlide
          key={src}
          src={src}
          alt={`image ${name}`}
          style={{ objectFit: "cover" }}
        />
      ))}
    </HvCarousel>
  </HvCardMedia>
</HvCard>

<HvCard bgcolor="atmo1" style={{ width: 300 }}>
  <HvCardHeader title="Star wars characters" />
  <HvCardMedia role="none">
    <HvCarousel xs height={400} showCounter={false} showSlideControls>
      {[
        { name: "DarthVader", src: "https://i.imgur.com/zAeHrRF.jpg" },
        { name: "BobaFett", src: "https://i.imgur.com/0OR7lyx.jpg" },
        { name: "Revan", src: "https://i.imgur.com/WmgIWxw.jpg" },
        { name: "TheMandalorian", src: "https://i.imgur.com/kjPDte9.jpg" },
        { name: "Anakin", src: "https://i.imgur.com/5QbhIqE.jpg" },
        { name: "Ahsoka", src: "https://i.imgur.com/MqqmCWc.jpg" },
        { name: "ObiWan", src: "https://i.imgur.com/zJe518o.png" },
        { name: "Mace", src: "https://i.imgur.com/wgeZ4uO.jpg" },
        { name: "Yoda", src: "https://i.imgur.com/65lzJlV.jpg" },
      ].map(({ src, name }) => (
        <HvCarouselSlide
          key={src}
          src={src}
          alt={`image ${name}`}
          style={{ objectFit: "cover" }}
        />
      ))}
    </HvCarousel>
  </HvCardMedia>
</HvCard>

Carousel options

You can control the HvCarousel’s configuration via the carouselOptions prop. See options documentation.

Landscapes

4 / 7

<HvCarousel
  title="Landscapes"
  showFullscreen
  carouselOptions={{
    loop: false,
    dragFree: true,
    startIndex: 3,
  }}
  renderThumbnail={(i) => (
    <img
      src={`https://lumada-design.github.io/assets/landscape${i + 1}.jpg`}
      alt={`thumbnail-${i}`}
    />
  )}
>
  {[...Array(7).keys()].map((i) => (
    <HvCarouselSlide
      key={i}
      src={`https://lumada-design.github.io/assets/landscape${i + 1}.jpg`}
      alt={`image ${i}`}
    />
  ))}
</HvCarousel>

<HvCarousel
  title="Landscapes"
  showFullscreen
  carouselOptions={{
    loop: false,
    dragFree: true,
    startIndex: 3,
  }}
  renderThumbnail={(i) => (
    <img
      src={`https://lumada-design.github.io/assets/landscape${i + 1}.jpg`}
      alt={`thumbnail-${i}`}
    />
  )}
>
  {[...Array(7).keys()].map((i) => (
    <HvCarouselSlide
      key={i}
      src={`https://lumada-design.github.io/assets/landscape${i + 1}.jpg`}
      alt={`image ${i}`}
    />
  ))}
</HvCarousel>

Custom content

A Carousel supports any kind of content, not just images.