Owl Carousel 2 sets itself to display none
<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>