Happeo UIkit logo
Components
Home
Packages
AlertsAvatarBannersBreadcrumbsButtonsButtonsDS3CardColor PickerColorsContent RendererEmojisFile IconFile PickerForm ElementsIcons AppIcons FileIcons FlagIcons LegacyIcons SymbolImage CarouselImage array specsBroken ImagesOne imageImage CropperImage GridLayoutListLoadersMenusModalsNavigationThemeToastTypography

Image-carousel

Name
@happeouikit/image-carousel
Latest
2.0.3
License
MIT
Installation
yarn add @happeouikit/image-carousel
Links
    Dependencies (0)
    No Dependencies

    An image carousel is a container (slideshow) of images or info that users can select by clicking a button that directs them forward or backward in the slideshow

    Image array specs

    The component takes in an array of images. An example array is below:

    const images = [
        {
          src: "https://source.unsplash.com/2ShvY8Lf6l0/800x599",
          alt: "This is alt text"
        },
        {
          src: "https://source.unsplash.com/u9cG4cuJ6bU/4927x1000",
          alt: "A wide image"
        }
      ];
    <ImageCarousel
        images={images}
        imageHeight="208px"
      />

    Broken Images

    If an image encounters an error on loading, an error state component will be rendered in place.

    One image

    If there's just one image, the arrows will be hidden