PnP SPFx Controls not rendering responsive
-
08-02-2021 - |
Domanda
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
Soluzione 2
adding below css made my image and carousal responsive
.img-responsive {
width: 100%;
height: auto;
}
Hope this may help somebody
Altri suggerimenti
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.
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a sharepoint.stackexchange