Auto play false Image Carousel SPFX webpart

Question

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> 

Answer 1

I would suggest to use a state variable to set the value of autoPlay for your carousel.

Assuming, you have a property with isAutoPlay: boolean in your state:

You can set the autoPlay to true on web-part initialization as:

this.setState({ isAutoPlay: true });

In your onClick function, set this property to false like:

this.setState({ isAutoPlay: false });

And finally onDismiss of your Modal pop-up again set this property to true.