Image Carousel Spfx webpart

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

Answer 1

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:

React Modals.

Personally I liked the Modal-React Bootstrap.