I have created image carousel SPFx web-part which is set as auto-play equal to true
and on click of image there is modal pop up, its working fine.
But when I click on image my modal pop up open but my auto-play keep on running how to set it false on click and on pop up close set it to true.
<div className={styles.reactCarousel}>
<Carousel showThumbs={false} autoPlay={true} >
{this.state.items.map((imageList, key) => {
return (<div>
<img src={imageList.Image ? imageList.Image["Url"] : ''} />
<p className={styles.legends} onClick={() => { this._onClickItem(imageList.Title) }}>{imageList.Title}</p>
</div>)
})}
</Carousel>
<div>
{this.state.items1.map((description) => {
return (<div>
<div dangerouslySetInnerHTML={{ __html: description.Body }} />
</div>)
})}
<Modal
titleAriaId={this._titleId}
subtitleAriaId={this._subtitleId}
isOpen={this.state.showModal}
onDismiss={this._closeModal}
isBlocking={false}
containerClassName={styles.container} >
<div >
<span id={this._titleId}></span>
</div>
<div id={this._subtitleId}>
<DefaultButton onClick={this._closeModal} text="Close" />
{this.state.items2.map((items2) => {
return (<div>
<img src={items2.Image ? items2.Image["Url"] : ''} />
</div>)
})}
</div>
</Modal>
</div>
</div>