Carousel - Type B

This is another Carousel component. Carousel allows us to show multiple images in the same space. Its can be used when:-

• There is a group of content on the same level.
• There is insufficient content space, it can be used to save space.
• Commonly used for a group of pictures/cards.

It differs from the CarouselTypeA component in terms of props and the boilerplate code. Whereas, the CarouselTypeA receives an array of image addresses, the CarouselTypeB component receives the children prop. It wraps each image inside an ImagePanel component and shows the ImagePanel child element corresponding to the active index.

Props

Props	Type	Required	Description
children	ArrayJSX.Element[]	Yes	children is an array of child elements which contains each image wrapped in an <ImagePanel /> component
rotate	boolean	No	When true, it will allow the carousel to jump from last image to first image and vice-versa. Default value is false
UserIndicatorComponent	React.FC<UserIndicator ComponentProps>	No	User can pass this component to replace the default indicator <Dots /> component
UserNavigationButtons	React.FC<UserNavigation ButtonsProps>	No	User can pass this component to replace the default left and right <Navigation /> component

UserIndicatorComponentProps

The UserIndicatorComponent renders a single dot and is mapped over the images array to render the corresponding dot for each image. It should accept the follwing props.

Props	Type	Required	Description
index	number	Yes	The index of the current image in the array
activeIndex	number	Yes	The index of the current selected image in the array
changeImage	(index: number) => void	Yes	A function that gets called on clicking a dot. When you click a dot, its corresponding index is set as the activeIndex

UserNavigationButtonsProps

The UserNavigationButtons can be used to pass a user navigation component. It should accept the following props.

Props	Type	Required	Description
slideLeft	( ) => void	Yes	A function that will be passed to enable the left navigation in the carousel
slideRight	( ) => void	Yes	A function that will be passed to enable the right navigation in the carousel

http://localhost:3000

src/components/ExampleCarousel/index.tsx

import {
  CarouselTypeB,
  ImagePanel,
  UserIndicatorComponent,
  UserNavigationButtons,
} from "canary-design";

const images = [
  "https://images.squarespace-cdn.com/content/v1/57afe07729687fbd6a7971ad/1471718394640-AYK8C3POPTKL2GU5DGRM/Glacier.National.Park.original.494.jpg?format=2500w",
  "https://dynamic-media-cdn.tripadvisor.com/media/photo-o/17/f3/ba/50/royal-arches-on-the-left.jpg?w=1100&h=-1&s=1",
  "https://cdn.britannica.com/46/193946-050-853B37E0/Yosemite-National-Park-California.jpg",
  "https://res.klook.com/images/fl_lossy.progressive,q_65/c_fill,w_1170,h_780/w_72,x_13,y_13,g_south_west,l_Klook_water_br_trans_yhcmh3/activities/rcoclkcqcpyoogx1rbvl/4-DayYellowstoneNationalParkLuxuryTourfromSaltLakeCity.jpg",
  "https://lp-cms-production.imgix.net/2021-03/shutterstockRF_1180791211.jpg",
];

function ExampleCarouselTypeB() {
  return (
    /* Note:- The carousel will automatically take the entire width and height of the parent. We have given fixed height to parent because we want all images to appear of same height. */
    <div style={{ height: "384px" }}>
      <CarouselTypeB
        rotate
        UserIndicatorComponent={(props) => (
          <UserIndicatorComponent {...props} />
        )}
        UserNavigationButtons={(props) => <UserNavigationButtons {...props} />}
      >
        {images.map((image, index) => (
          <ImagePanel key={index}>
            <img src={image} alt="Carousel image" />
          </ImagePanel>
        ))}
      </CarouselTypeB>
    </div>
  );
}

export { ExampleCarouselTypeB };

Note:- We can either map over the images array to render images using <ImagePanel> component or we can write all <ImagePanel> components manually, passing them the <img /> tag and image index, both works fine. However, using map is a better approach as it ensures that we do not add any extra or any less <ImagePanel> components.

Therefore, The above code can also be written as:-

src/components/ExampleCarousel/index.tsx

import {
  CarouselTypeB,
  ImagePanel,
  UserIndicatorComponent,
  UserNavigationButtons,
} from "canary-design";

const images = [
  "https://images.squarespace-cdn.com/content/v1/57afe07729687fbd6a7971ad/1471718394640-AYK8C3POPTKL2GU5DGRM/Glacier.National.Park.original.494.jpg?format=2500w",
  "https://dynamic-media-cdn.tripadvisor.com/media/photo-o/17/f3/ba/50/royal-arches-on-the-left.jpg?w=1100&h=-1&s=1",
  "https://cdn.britannica.com/46/193946-050-853B37E0/Yosemite-National-Park-California.jpg",
  "https://res.klook.com/images/fl_lossy.progressive,q_65/c_fill,w_1170,h_780/w_72,x_13,y_13,g_south_west,l_Klook_water_br_trans_yhcmh3/activities/rcoclkcqcpyoogx1rbvl/4-DayYellowstoneNationalParkLuxuryTourfromSaltLakeCity.jpg",
  "https://lp-cms-production.imgix.net/2021-03/shutterstockRF_1180791211.jpg",
];

function ExampleCarouselTypeB() {
  return (
    /* Note:- The carousel will automatically take the entire width and height of the parent. We have given fixed height to parent because we want all images to appear of same height. */
    <div style={{ height: "384px" }}>
      <CarouselTypeB
        rotate
        UserIndicatorComponent={(props) => (
          <UserIndicatorComponent {...props} />
        )}
        UserNavigationButtons={(props) => <UserNavigationButtons {...props} />}
      >
        <ImagePanel>
          <img src={images[0]} alt="Carousel image" />
        </ImagePanel>
        <ImagePanel>
          <img src={images[1]} alt="Carousel image" />
        </ImagePanel>
        <ImagePanel>
          <img src={images[2]} alt="Carousel image" />
        </ImagePanel>
        <ImagePanel>
          <img src={images[3]} alt="Carousel image" />
        </ImagePanel>
        <ImagePanel>
          <img src={images[4]} alt="Carousel image" />
        </ImagePanel>
      </CarouselTypeB>
    </div>
  );
}

export { ExampleCarouselTypeB };