0

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

1
  • Any help please !!
    – Milind
    Dec 23 '19 at 5:12
1

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>
    );
  }
}

enter image description here

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

1
  • Thank you for reply but most of the webpart you are showing is using jquery which, I don't. I am looking for pure React webpart
    – Milind
    Dec 23 '19 at 10:07
0

adding below css made my image and carousal responsive

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

Hope this may help somebody

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.