Carousel

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`,
);

<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>

<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="Travel Suggestions" carouselOptions={{ loop: false }}>
  {[...Array(7).keys()]
    .map((i) => `https://lumada-design.github.io/assets/landscape${i + 1}.jpg`)
    .map((src, i) => (
      <HvCarouselSlide key={src} size="50%">
        <div style={{ position: "relative" }}>
          <div className="absolute w-70% m-md p-xs bg-base_dark text-base_light bg-opacity-40">
            <HvTypography className="text-inherit" variant="title3">
              Travel destination {i + 1}
            </HvTypography>
            <HvTypography className="text-inherit">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </HvTypography>
          </div>
          <img
            src={src}
            alt={`travel destination ${i + 1}`}
            className="w-600px aspect-video"
          />
        </div>
      </HvCarouselSlide>
    ))}
</HvCarousel>