title: React-Bootstrap Carousel occasionally gets stuck on the second image
body: <p>My React-Bootstrap Carousel occasionally sticks on the second image for an extended duration even though I have an interval set of <code>{1500}</code>.</p>
  <p>This happens no matter what image I use there.  Any ideas?</p>
  <pre class="lang-js prettyprint-override"><code>function Work() {
  
    return (
      &lt;Carousel fade indicators={false} controls={false} &gt;
  
         {/* provides brief period with no image. */}
         &lt;Carousel.Item interval={200}&gt;&lt;/Carousel.Item&gt;
  
        &lt;Carousel.Item interval={1500}&gt;
          &lt;img className=&quot;d-block w-100&quot; src={news} alt=&quot;News Flash&quot; /&gt;
        &lt;/Carousel.Item&gt;
  
        &lt;Carousel.Item interval={5000}&gt;
          &lt;img
            className=&quot;d-block w-100&quot;
            src={newsBlur}
            alt=&quot;News Flash blurred&quot;
          /&gt;
          &lt;Carousel.Caption style={styles.carouselCaption}&gt;
            &lt;h3&gt;
              News Flash gathers news based on the user's
              news category preferences.
            &lt;/h3&gt;
            &lt;h3&gt;
              &lt;a
                href=&quot;https://github.com/Xr7TSi/News-Flash&quot;
                className=&quot;btn btn-primary&quot;
                style={styles.buttonPrimary}
              &gt;
                &lt;h5&gt;See the repo&lt;/h5&gt;
              &lt;/a&gt;
            &lt;/h3&gt;
          &lt;/Carousel.Caption&gt;
        &lt;/Carousel.Item&gt;
      &lt;/Carousel&gt;
      
    );
  }
  </code></pre>