Image Carousel Spfx webpart
-
08-02-2021 - |
Question
Hi I am working on SPFx image carousel web-part using react responsive carousel.
I want that if user click on image on carousel it will show detail description of image in modal dialog on same page:
public render(): React.ReactElement<IReactCarouselProps> {
return (
<div className={styles.reactCarousel}>
<Carousel showThumbs={false} autoPlay={true} >
{this.state.items.map((imageList) => {
return (<div>
<img src={imageList.Image["Url"]} />
<p className="legend">{imageList.Title}</p>
</div>)
})}
</Carousel>
<div>
{this.state.items1.map((description) => {
return (<div>
<div dangerouslySetInnerHTML={{__html: description.Body}} />
</div>)
})}
</div>
</div>
);
}
Solution
You can use onClickItem
attribute of Carousel to right your own function to show the details of clicked image from carousel. you can add it on carousel like:
<Carousel showThumbs={false} onClickItem={_onClickItem} autoPlay={true} >
{this.state.items.map((imageList) => {
return (<div>
<img src={imageList.Image["Url"]} />
<p className="legend">{imageList.Title}</p>
</div>)
})
}
</Carousel>
function _onClickItem() {
console.log('onClickItem', arguments);
}
Check the implementation of there at: react-responsive-carousel.
NPM Package Reference: React Responsive Carousel.
And to show the modal pop-up you can use any one of the modal popups in React JS:
Personally I liked the Modal-React Bootstrap.
Licensed under: CC-BY-SA with attribution
Not affiliated with sharepoint.stackexchange