Carousel component not showing images?

[kapildropani]

I'm trying with the Carousel component. It's only rendering right and left chevron icons. I have also uploaded the DOM image for the reference.

Component Code:

// import styles from "./Carousel.module.scss";
import type { ICarouselProps } from "./ICarouselProps";
import {
  CarouselButtonsDisplay,
  CarouselButtonsLocation,
  CarouselIndicatorShape,
  Carousel as FluentCarousel,
  ICarouselImageProps,
} from "@pnp/spfx-controls-react/lib/Carousel";
import { ImageFit } from "@fluentui/react";

const carouselData: JSX.Element[] = [
  {
    imageSrc:
      "https://images.unsplash.com/photo-1588614959060-4d144f28b207?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3078&q=80",
    title: "Colosseum",
    description: "This is Colosseum",
    url: "https://en.wikipedia.org/wiki/Colosseum",
    showDetailsOnHover: true,
    imageFit: ImageFit.cover,
  },
  {
    imageSrc:
      "https://images.unsplash.com/photo-1588614959060-4d144f28b207?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3078&q=80",
    title: "Colosseum",
    description: "This is Colosseum",
    url: "https://en.wikipedia.org/wiki/Colosseum",
    showDetailsOnHover: true,
    imageFit: ImageFit.cover,
  },
  {
    imageSrc:
      "https://images.unsplash.com/photo-1588614959060-4d144f28b207?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3078&q=80",
    title: "Colosseum",
    description: "This is Colosseum",
    url: "https://en.wikipedia.org/wiki/Colosseum",
    showDetailsOnHover: true,
    imageFit: ImageFit.cover,
  },
].map((item:ICarouselImageProps, key)=><div key={key} >
<div>
  <a href={item.url}>
    <img style={{ width: '100%', height: '250px' }} src={item.imageSrc} alt="banner" />
  </a>
  <div style={{ background: 'rgba(0, 0, 0, 0.3)', overflow: 'hidden', fontSize: 16, top: 0, transition: '.7s ease', textAlign: 'left', width: '200px', height: '200px', position: 'absolute', color: '#ffffff', padding: '25px' }}>
    <h2 style={{ fontSize: 20, textTransform: 'uppercase', color: 'white' }}>{item.description}</h2>
    <p>{'Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, laborum quibusdam adipisci recusandae, alias aspernatur error maiores repellat.'}</p>
  </div>
</div>
</div>)
export default class Carousel extends React.Component<ICarouselProps, {}> {
  public render(): React.ReactElement<ICarouselProps> {
    const {
      // description,
      // isDarkTheme,
      // environmentMessage,
      // hasTeamsContext,
      // userDisplayName
    } = this.props;

    return (
      <>
        <FluentCarousel
          buttonsLocation={CarouselButtonsLocation.center}
          buttonsDisplay={CarouselButtonsDisplay.buttonsOnly}
          // contentContainerStyles={styles.carouselImageContent}
          isInfinite={true}
          indicatorShape={CarouselIndicatorShape.circle}
          pauseOnHover={true}
          element={carouselData}
          onMoveNextClicked={(index: number) => {
            console.log(`Next button clicked: ${index}`);
          }}
          onMovePrevClicked={(index: number) => {
            console.log(`Prev button clicked: ${index}`);
          }}
        />
      </>
    );
  }
}

Response:

Category

[ ] Enhancement

[] Bug

[*] Question

Version

Please specify what version of the library you are using: [ @pnp/spfx-controls-react:3.15.0, @microsoft/generator-sharepoint:1.18.0, @fluentui/react: 8.106.4 ]

Expected / Desired Behavior / Question

It should show the images in my case it's carousel data please check the above code at line#13

Observed Behavior

Currently, I'm not able to see images in the carousel.

Steps to Reproduce

Just copy the above code in any webpart.tsx file with all the mentioned dependencies.

Thanks!

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[github-actions[bot]]

Thank you for submitting your first issue to this project.

[GuidoZam]

Hi @kapildropani, I think that your problem is that you commented out the style defining the image container. I tried to copy/paste your code and manage to make it work defining a custom style in the scss file.

If you uncomment the lines

import styles from "./Carousel.module.scss";

and, inside the FluentCarousel control, the line

contentContainerStyles={styles.carouselImageContent}

and add, in the Carousel.module.scss file, the following class

.carouselImageContent {
  height: 200px;
  width: 80%;
}

This should display the control without any problem. Let me know if it works this way.

[kapildropani]

Hi @kapildropani, I think that your problem is that you commented out the style defining the image container. I tried to copy/paste your code and manage to make it work defining a custom style in the scss file.

If you uncomment the lines

import styles from "./Carousel.module.scss";

and, inside the FluentCarousel control, the line

contentContainerStyles={styles.carouselImageContent}

and add, in the Carousel.module.scss file, the following class

.carouselImageContent {
  height: 200px;
  width: 80%;
}

This should display the control without any problem. Let me know if it works this way.

Ohhh! Thank you very much but I do solved it by myself after spending a lot of time. I'm really sorry couldn't stated here.

Thanks again.

[michaelmaillot]

Hi @kapildropani,

Thanks to @GuidoZam's help, can we consider this issue as resolved and to be closed?

[kapildropani]

Hi @kapildropani,

Thanks to @GuidoZam's help, can we consider this issue as resolved and to be closed?

Yes, sure @michaelmaillot