title: Owl Carousel 2 sets itself to display none
body: <p>im trying to get owl carousel 2 to work on my php site. I have used the exact same code on an Anguler site, besides the function of course. So This should work. Here is my script and links </p>
  
  <pre><code>jQuery(document).ready(function(){
    jQuery('#owl2').owlCarousel({
      navigation: true,
      nav: true,    
      dots: false,
      margin: 50,
      dotsEach: false,
      dotData: false,
      center: true,
      autoWidth: true,
      items: 5,
      center:true,
      slideSpeed: 300,
      paginationSpeed: 400,                        
      autoPlay: false,
      responsive:{
          0:{
              items:1
          },
          600:{
              items:3
          },
          1000:{
              items:5
          }
          }
      });
  });
  </code></pre>
  
  <p>the html</p>
  
  <pre><code> &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;            
                  &lt;div id="owl2" class="owl-carousel owl-theme"&gt;
                      &lt;div class="item verticle-align"&gt;
                          &lt;img class="verticle-align" src="img/metabo.png" alt=""&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;img class="verticle-align" src="img/aeroquip.png" alt=""&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;img class="verticle-align" src="img/IR.png" alt=""&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;img class="verticle-align" src="img/huck.png" alt=""&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;img class="verticle-align" src="img/infasco.png" alt=""&gt;
                      &lt;/div&gt;   
                      &lt;div class="item"&gt;
                          &lt;img class="verticle-align" src="img/metabo.png" alt=""&gt;
                      &lt;/div&gt;   
                      &lt;div class="item"&gt;
                          &lt;img class="verticle-align" src="img/chicago-pneumatic.jpg" alt=""&gt;
                      &lt;/div&gt; 
                      &lt;div class="item"&gt;
                          &lt;img class="verticle-align" src="img/Gesipa.jpg" alt=""&gt;
                      &lt;/div&gt;               
                  &lt;/div&gt;            
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>and my links</p>
  
  <pre><code> &lt;!-- Bootstrap --&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/boot/bootstrap.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/boot/bootstrap-theme.css"&gt;
  
  
      &lt;!--owl css--&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/owl_carousel/owl.carousel.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/owl_carousel/owl.theme.css"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" &gt;
  
      &lt;!--Other CSS files--&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/responsive.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/main.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/fa/font-awesome.css"&gt;
  
      &lt;!--Jquery--&gt;
      &lt;script src="js/jquery-2.2.3.min.js"&gt;&lt;/script&gt;
  
  
      &lt;!-- Bootstrap JS --&gt;
      &lt;script src="js/boot/bootstrap.js"&gt;&lt;/script&gt;
      &lt;!--&lt;script src="js/boot/bootstrap.min.js"&gt;&lt;/script&gt;--&gt;
  
      &lt;!--Other Js files--&gt;    
      &lt;script src="js/main.js"&gt;&lt;/script&gt;
      &lt;script src="js/owl/owl.carousel.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I have done this many times before but cant seem to get it to work this time. Anyone have any idea what I am doing wrong?</p>
  
  <p>I was asked to add the second carousel i am using on the page, below is the html/js for said carousel</p>
  
  <pre><code>&lt;div id="owl" class="owl-carousel owl-theme"&gt;
                  &lt;div class="item first-item"&gt;
                      &lt;div class="products-images"&gt;
                          &lt;a href="./img/catalog/9-Assortments-Storage.pdf"     target="_blank"&gt;Assortments&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;div class="products-images"&gt;
                          &lt;a href="./img/catalog/4-Tools.pdf"               target="_blank"&gt;Tools&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;div class="products-images"&gt;
                          &lt;a href="./img/catalog/4-Tools.pdf" target="_blank"&gt;Cutting Tools&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item active"&gt;
                      &lt;div class="products-images "&gt;
                          &lt;a href="./img/catalog/7-Brass.pdf" target="_blank"&gt;Fittings&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;div class="products-images"&gt;
                          &lt;a href="./img/catalog/6-Electrical.pdf" target="_blank"&gt;Electrical&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;div class="products-images"&gt;
                          &lt;a href="./img/catalog/1-Fasteners.pdf" target="_blank"&gt;Fasteners&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;div class="products-images"&gt;
                          &lt;a href="./img/catalog/2014Safety.pdf" target="_blank"&gt;Saftey&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;div class="products-images"&gt;
                          &lt;a href="./img/catalog/5-ShopSupplies.pdf" target="_blank"&gt;Shop Supplies&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;div class="products-images"&gt;
                          &lt;a href="./img/catalog/2-Rivets-Huck.pdf" target="_blank"&gt;Rivets&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;div class="products-images"&gt;
                          &lt;a href="./img/catalog/2014CustomPackaging.pdf" target="_blank"&gt;Custom Packaging&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="item"&gt;
                      &lt;div class="products-images"&gt;
                          &lt;a href="./img/catalog/3-Chemicals.pdf" target="_blank"&gt;Chemicals&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  &lt;script type="text/javascript"&gt;
  jQuery(document).ready(function(){
    jQuery('#owl').owlCarousel({
      navigation: true,
      nav: true,    
      dots: false,
      dotsEach: false,
      dotData: false,
      center: true,
      autoWidth: true,
      items: 7,
      center:true,
      slideSpeed: 300,
      paginationSpeed: 400,                        
      autoPlay: false,
      responsive:{
          0:{
              items:1
          },
          600:{
              items:3
          },
          1000:{
              items:5
          }
          }
      });
  });
  &lt;/script&gt;
  </code></pre>