title: Owl Carousel npm module is not working in reactjs
body: <p>I am working on a reactjs application and I am using owl carousel npm module to show some data.</p>
  
  <p>I am having a component which only renders owl carousel , for that I installed owl carousel and importing like below</p>
  
  <pre><code>import OwlCarousel from 'react-owl-carousel';
  import 'owl.carousel/dist/assets/owl.carousel.css';
  import 'owl.carousel/dist/assets/owl.theme.default.css';
  </code></pre>
  
  <p>and below is the render method</p>
  
  <pre><code> render() {
      const options = { 
          nav: true,
          navText:["&lt;div className='nav-btn prev-slide'&gt;&lt;/div&gt;","&lt;div className='nav-btn next-slide'&gt;&lt;/div&gt;"],
          rewind: false,
          autoplay: true,
          slideBy: 1,
          dots: true,
          dotsEach: true,
          dotData: true
        };
        if(!this.state.response) return(&lt;div&gt;Loading...&lt;/div&gt;);
        return (
            &lt;div className="container"&gt;
            &lt;div className="PageHeading"&gt;
              &lt;div className="row"&gt;
                &lt;div className="col-md-8 col-sm-8 col-xs-12"&gt;&lt;h4&gt;Latest Published&lt;/h4&gt;&lt;/div&gt;
                &lt;div className="col-md-4 col-sm-4 col-xs-12 text-right"&gt;&lt;Link to="/"&gt;View All&amp;nbsp;&lt;i className="arrow_carrot-right"&gt;&lt;/i&gt;&lt;/Link&gt;&lt;/div&gt;&lt;/div&gt;
                &lt;/div&gt;
                &lt;br /&gt;
               &lt;OwlCarousel ref="gallery" margin={15} loop autoplay={true} items={6}  options={options}&gt;
                  {
                      this.state.response.map((obj,key)=&gt;
                      &lt;div className="" key={key}&gt;
                      &lt;div className="subcategories_blockCard"&gt; 
                      &lt;Link to={'/book/'+obj.book_title.split(' ').join('-')}&gt;
                          &lt;img src={'http://localhost:3001/'+obj.book_cover} style={{'width':'100%'}} title={obj.book_title}/&gt;
                          {/* &lt;div className="card-content"&gt;{obj.book_title}&lt;/div&gt; */}
                          &lt;/Link&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                      )
                  }
  
              &lt;/OwlCarousel&gt;
            &lt;/div&gt;
  
          )
    }
  </code></pre>
  
  <p>Now, problem is that when the application get started carousel items not visible and when I click any link which contains the root path  <code>http://localhost:3000/</code> (suppose the logo of the application contains href of <code>http://localhost:3000/</code> and when click on logo which is <code>&lt;a href="http://localhost:3000"&gt;&lt;img src="logo.png /&gt;&lt;/a&gt;</code>) then carousel gets appear on the page.</p>
  
  <p>I don't know how to fix it,
  Please help me.</p>