question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Carousel position resets when parent component's timer interval is triggered

See original GitHub issue

I have a <Carousel> instance that is embedded in a parent component’s render method.

render() {
  return (
    <div>
      <Carousel>
        ...
      </Carousel>
    </div>
  )
}

The parent component’s componentDidMount() method contains a setInterval() call that runs every five seconds (for example).

componentDidMount() {
  this.myRefreshInterval = setInterval(() => { ... }, 5000)
}

The carousel’s selectedItem property is reset to zero every five seconds, when the parent component’s myRefreshInterval interval is triggered.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:2
  • Comments:6

github_iconTop GitHub Comments

7reactions
lukevandekieftcommented, Apr 18, 2019

Was able to get this working, thanks for the suggestion spamforhope! For anyone trying to control carousel position in parent state here’s what I used:

Carousel:

<Carousel onChange={this.props.changeCarousel} selectedItem={this.props.carouselPosition}>

Parent Component:

  state = {
    carouselPosition: 0,
  }

  changeCarousel = index => {
    this.setState({carouselPosition: index});
  }
1reaction
spamforhopecommented, Jan 4, 2019

@tenacious-joy I’ve created logic where I store current slide Index and set it to Carousel activeSlide props every time. It works, but it’s not a solution.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Resetting interval timer for carousel [duplicate] - Stack Overflow
This is a simple this.currentAlbum = selectedValue (selectedValue being received from the HTML click). However, when doing this, the timer ...
Read more >
Options - Splide
Learn how to customize the carousel by available options. ... Converts the image src to the css background-image URL of the parent element....
Read more >
setInterval() - Web APIs - MDN Web Docs
This method returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval() . Syntax.
Read more >
Overlays | React-Bootstrap
A set of components for positioning beautiful overlays, tooltips, popovers, and anything else you need. Overview#. Things to know about the React-Bootstrap ...
Read more >
How to Create an Animated Countdown Timer With HTML ...
To visualize time passing, we need to add a second layer to our ring that handles the animation. What we're doing is essentially...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found