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.

stopOnHover not working correctly?

See original GitHub issue

Been troubleshooting the use of stopOnHover within my solution. First time I’ve decided to setup the use of autoPlay within the Carousel. Upon setting autoPlay, when I hover over the component, the autoPlay is not being stopped. stopOnHover by default is set to true and I also manually added the property to the component.

After some digging, the carouselWrapper value is undefined below so the addEventListeners are not being properly added within the setupAutoPlay.

key: 'setupAutoPlay',
      value: function setupAutoPlay() {
          var carouselWrapper = this.refs['carouselWrapper'];

          if (this.props.stopOnHover && carouselWrapper) {
              carouselWrapper.addEventListener('mouseenter', this.stopOnHover);
              carouselWrapper.addEventListener('mouseleave', this.startOnLeave);

Not quite sure why this is happening, even setting everything back to 100% default without my customizations to the CSS is still not working.

Any thoughts or something silly I’m completely forgetting…?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

Cyan005commented, Feb 20, 2018

And… switching from using the state object to passing in as a prop resolves this issue. I can get away with using this scenario for what I need. However, if anyone in the future needed to use the state to follow this same pattern, this issue may pop back up again.

Updating from this.state.newsBannerItems to this.props.newsBannerItems resolves this.


<Carousel showArrows={true} showThumbs={true} showStatus={false} interval={1000} autoPlay={true} infiniteLoop={true}>  
        { , key) => {
            return (  
              <div className='newsBannerItem' key={key}><img src={item.BannerImage.Url} />
                <p className='legend'>{item.Title}... <a href={this.buildNewsLink(item)}>Read More</a></p>
thewashingtonhuacommented, Mar 20, 2018

I’m experiencing same problem here. My work around still uses this.state.newsBannerItems. but put an empty <div> as placeholder if its length is 0.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Owl carousel autoplay and stopOnHover not working
I would like to slow down the speed of slides and make them stop sliding on hover. I added a script to bottom...
Read more >
Fixed a bug where layer positions in slide editor where not correctly calculated if the layer had a padding or margin. white-space and...
Read more >
Owl carousel 'trigger' question (Example) - Treehouse
I think I have to work with the 'this' selector but am not sure on how to ... loop: true, autoPlay : false,...
Read more >
react-responsive-carousel - npm
Start using react-responsive-carousel in your project by running `npm i ... stopOnHover, boolean, The slide will not change by autoPlay on ...
Read more >
Fixed HTML Export gradiants not working properly; Fixed YouTube and Vimeo Video Rewind issue on reenter specific slides. Fixed Toggle FullScreen Mode where ......
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 Post

No results found

github_iconTop Related Hashnode Post

No results found