PnP SPFx Controls not rendering responsive

Question

I have created one static web part using react carousal but it is not working as responsive. Please guide me if I am missing anything

import { Carousel, CarouselButtonsDisplay, CarouselButtonsLocation } from '@pnp/spfx-controls-react/lib/Carousel'
import * as React from 'react'

import styles from './HomePageCarousel.module.scss'
import { IHomePageCarouselProps } from './IHomePageCarouselProps'
import { IHomePageCarouselStates } from './IHomePageCarouselStates'

const banner_1: any = require('../../../images/banner_1.jpg')

export default class HomePageCarousel extends React.Component<IHomePageCarouselProps, IHomePageCarouselStates> {
  constructor(props: IHomePageCarouselProps) {
    super(props)

    this.state = {
      carouselElements: [
        <div key="1">
          <a href="#">
            <img src={banner_1} alt="banner" className={styles['rounded-top']} />
          </a>
          <div className={[styles["ms-bgColor-white"], styles["rounded-bottom"], styles["p-10"]].join(' ')}>
            <span className={[styles["ms-fontColor-green"], styles["ms-fontWeight-bold"]].join(' ')}>
              News title will show here. News title will show here. News title will show
              here. News title will show here. News title will show here. News title will
              show here. News title will show here. News title will show here. ... Milind
                </span>
          </div>
        </div>,
        <div key="2">
          <a href="#">
            <img src={banner_1} alt="banner" className={styles['rounded-top']} />
          </a>
          <div className={[styles["ms-bgColor-white"], styles["rounded-bottom"], styles["p-10"]].join(' ')}>
            <span className={[styles["ms-fontColor-green"], styles["ms-fontWeight-bold"]].join(' ')}>
              News title will show here. News title will show here. News title will show
              here. News title will show here. News title will show here. News title will
              show here. News title will show here. News title will show here. ... Milind1
              </span>
          </div>
        </div>,
        <div key="3">
          <a href="#">
            <img src={banner_1} alt="banner" className={styles['rounded-top']} />
          </a>
          <div className={[styles["ms-bgColor-white"], styles["rounded-bottom"], styles["p-10"]].join(' ')}>
            <span className={[styles["ms-fontColor-green"], styles["ms-fontWeight-bold"]].join(' ')}>
              News title will show here. News title will show here. News title will show
              here. News title will show here. News title will show here. News title will
              show here. News title will show here. News title will show here. ... Milind2
              </span>
          </div>
        </div>
      ]
    }
  }
  public render(): React.ReactElement<IHomePageCarouselProps> {
    return (
      <div className={styles.homePageCarousel}>
        <div className={styles['ms-Grid']}>
          <div className={styles['ms-Grid-row']}>
            <div className={[styles['ms-Grid-col'], styles['ms-sm6'], styles['ms-md6'], styles['ms-lg6']].join(' ')}>
              <Carousel
                buttonsLocation={CarouselButtonsLocation.bottom}
                buttonsDisplay={CarouselButtonsDisplay.buttonsOnly}

                // contentContainerStyles={styles.carouselContent}
                // containerButtonsStyles={styles.carouselButtonsContainer}

                isInfinite={true}

                element={this.state.carouselElements}
                onMoveNextClicked={(index: number) => { console.log(`Next button clicked: ${index}`); }}
                onMovePrevClicked={(index: number) => { console.log(`Prev button clicked: ${index}`); }}
              />
            </div>
          </div>
        </div>

      </div>
    );
  }
}

Let me know, if you need more info I can provide

Answer 1

adding below css made my image and carousal responsive

 .img-responsive {
    width: 100%;
    height: auto;
  }

Hope this may help somebody

Answer 2

The following code for your reference.

import * as React from 'react';
import styles from './HomePageCarousel.module.scss';
import { IHomePageCarouselProps } from './IHomePageCarouselProps';
import { IHomePageCarouselStates } from './IHomePageCarouselStates';
import { Carousel, CarouselButtonsDisplay, CarouselButtonsLocation } from '@pnp/spfx-controls-react/lib/Carousel'

const banner_1: any = "https://www.w3schools.com/howto/img_snow_wide.jpg";

export default class HomePageCarousel extends React.Component<IHomePageCarouselProps, IHomePageCarouselStates> {
  constructor(props:IHomePageCarouselProps,state:IHomePageCarouselStates) { 
    super(props); 

    this.state = { 
      carouselElements: [
        <div key="1">
          <a href="#">
            <img src={banner_1} alt="banner" className={styles['rounded-top']} width="600" height="300"/>
          </a>
          <div className={[styles["ms-bgColor-white"], styles["rounded-bottom"], styles["p-10"]].join(' ')}>
            <span className={[styles["ms-fontColor-green"], styles["ms-fontWeight-bold"]].join(' ')}>
              test1
                </span>
          </div>
        </div>,
        <div key="2">
          <a href="#">
            <img src={banner_1} alt="banner" className={styles['rounded-top']} width="600" height="300"/>
          </a>
          <div className={[styles["ms-bgColor-white"], styles["rounded-bottom"], styles["p-10"]].join(' ')}>
            <span className={[styles["ms-fontColor-green"], styles["ms-fontWeight-bold"]].join(' ')}>
             test2
              </span>
          </div>
        </div>,
        <div key="3">
          <a href="#">
            <img src={banner_1} alt="banner" className={styles['rounded-top']} width="600" height="300"/>
          </a>
          <div className={[styles["ms-bgColor-white"], styles["rounded-bottom"], styles["p-10"]].join(' ')}>
            <span className={[styles["ms-fontColor-green"], styles["ms-fontWeight-bold"]].join(' ')}>
             test3
              </span>
          </div>
        </div>
      ] 
    }; 
  } 

  public render(): React.ReactElement<IHomePageCarouselProps> {
    return (
      <div className={styles.homePageCarousel}>
        <div className={styles['ms-Grid']}>
          <div className={styles['ms-Grid-row']}>
            <div className={[styles['ms-Grid-col'], styles['ms-sm6'], styles['ms-md6'], styles['ms-lg6']].join(' ')}>
              <Carousel
                buttonsLocation={CarouselButtonsLocation.bottom}
                buttonsDisplay={CarouselButtonsDisplay.buttonsOnly}

                // contentContainerStyles={styles.carouselContent}
                // containerButtonsStyles={styles.carouselButtonsContainer}

                isInfinite={true}

                element={this.state.carouselElements}
                onMoveNextClicked={(index: number) => { console.log(`Next button clicked: ${index}`); }}
                onMovePrevClicked={(index: number) => { console.log(`Prev button clicked: ${index}`); }}
              />
            </div>
          </div>
        </div>

      </div>
    );
  }
}

If you want to create a Carousel SPFx web part, the following solutions from github for your reference.

React Carousel Web Part

SPFx React Slide Swiper

Simple Carousel