title: OWL Carousel 2 incorrect width, shows all items
body: <p>I have the following OWL Carousel 2 initialization code:</p>
  
  <pre><code>  $(document).ready(function(){
              moment.locale('nl-NL');
  
              $("#owl-slider").owlCarousel({ 
                items: 1,
                responsive: false,
                nav : false,
                loop: false,
                dots: true,                  
                dotsEach: 1,
                autoplaySpeed : 300,
                dotsSpeed : 400,
                autoPlay: true,
                navRewind: true,
                animateOut: 'fadeOut'
              });
  
          });
  </code></pre>
  
  <p>This results in the following html of the carousel:</p>
  
  <pre><code>  &lt;div class="item-list" id="newsblock"&gt;
      &lt;div id="owl-slider" class="owl-carousel owl-theme owl-loaded"&gt;
          &lt;div class="owl-stage-outer"&gt;
              &lt;div class="owl-stage" style="transform: translate3d(-934px, 0px, 0px); transition: 0s; width: 1401px;"&gt;
                  &lt;div class="owl-item" style="width: 467px; margin-right: 0px;"&gt;
                      &lt;div class="item"&gt;
                          &lt;img width="100%" src="/SITES/FOCUS-DEV/NIEUWS/PUBLISHINGIMAGES/INKTPOT.PNG?RenditionID=5" data-themekey="#"&gt;
                          &lt;div class="header"&gt;
                              &lt;h2 class="title"&gt;
                                  &lt;a title="Nieuwsbericht" href="https://testprorail.sharepoint.com/sites/Focus-DEV/nieuws/Paginas/Nieuwsbericht.aspx" rel="bookmark"&gt;Nieuwsbericht&lt;/a&gt;
                              &lt;/h2&gt;
                              &lt;div class="time"&gt;17 November&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;&lt;div class="owl-item" style="width: 467px; margin-right: 0px;"&gt;
                      &lt;div class="item"&gt;
                          &lt;img width="100%" src="/SITES/FOCUS-DEV/NIEUWS/PUBLISHINGIMAGES/8628PEPERNOTEN-550X485.JPG?RenditionID=5" data-themekey="#"&gt;
                          &lt;div class="header"&gt;
                              &lt;h2 class="title"&gt;
                                  &lt;a title="Nog meer nieuws" href="https://testprorail.sharepoint.com/sites/Focus-DEV/nieuws/Paginas/Nog-meer-nieuws.aspx" rel="bookmark"&gt;Nog meer nieuws&lt;/a&gt;
                              &lt;/h2&gt;
                              &lt;div class="time"&gt;17 November&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="owl-item active" style="width: 467px; margin-right: 0px;"&gt;
                      &lt;div class="item"&gt;
                          &lt;img width="100%" src="/SITES/FOCUS-DEV/NIEUWS/PUBLISHINGIMAGES/INKTPOT.PNG?RenditionID=5" data-themekey="#"&gt;
                          &lt;div class="header"&gt;
                              &lt;h2 class="title"&gt;
                                  &lt;a title="Test" href="https://testprorail.sharepoint.com/sites/Focus-DEV/nieuws/Paginas/test.aspx" rel="bookmark"&gt;Test&lt;/a&gt;
                              &lt;/h2&gt;
                              &lt;div class="time"&gt;17 November&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;div class="owl-controls"&gt;
              &lt;div class="owl-nav"&gt;
                  &lt;div class="owl-prev" style="display: none;"&gt;prev&lt;/div&gt;
                  &lt;div class="owl-next" style="display: none;"&gt;next&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="owl-dots" style=""&gt;
                  &lt;div class="owl-dot"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;div class="owl-dot"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
                  &lt;div class="owl-dot active"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is that the width of the owl-stage div is set to the width of all three items instead of 1. All items are shown instead of 1.</p>
  
  <p>Please provide some guidance on what could be the solution!</p>
  
  <p>Kind Regards.</p>