0

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> 
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.

  • thank you it is working as expected , i have one more query can i emmbedd video src in carousel it can play on carousel or in Modal popup – kumar Oct 10 at 2:11
  • 1
    React JS Carousel does supports Videos. You can read about it at React JS Carousel Features. – Ganesh Sanap Oct 10 at 4:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.