Owl Carousel 2 sets itself to display none

Question

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

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
        }
        }
    });
});

the html

 <div class="container">
    <div class="row">
        <div class="col-md-12">            
                <div id="owl2" class="owl-carousel owl-theme">
                    <div class="item verticle-align">
                        <img class="verticle-align" src="img/metabo.png" alt="">
                    </div>
                    <div class="item">
                        <img class="verticle-align" src="img/aeroquip.png" alt="">
                    </div>
                    <div class="item">
                        <img class="verticle-align" src="img/IR.png" alt="">
                    </div>
                    <div class="item">
                        <img class="verticle-align" src="img/huck.png" alt="">
                    </div>
                    <div class="item">
                        <img class="verticle-align" src="img/infasco.png" alt="">
                    </div>   
                    <div class="item">
                        <img class="verticle-align" src="img/metabo.png" alt="">
                    </div>   
                    <div class="item">
                        <img class="verticle-align" src="img/chicago-pneumatic.jpg" alt="">
                    </div> 
                    <div class="item">
                        <img class="verticle-align" src="img/Gesipa.jpg" alt="">
                    </div>               
                </div>            
        </div>
    </div>
</div>

and my links

 <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="css/boot/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/boot/bootstrap-theme.css">


    <!--owl css-->
    <link rel="stylesheet" type="text/css" href="css/owl_carousel/owl.carousel.css">
    <link rel="stylesheet" type="text/css" href="css/owl_carousel/owl.theme.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" >

    <!--Other CSS files-->
    <link rel="stylesheet" type="text/css" href="css/responsive.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/fa/font-awesome.css">

    <!--Jquery-->
    <script src="js/jquery-2.2.3.min.js"></script>


    <!-- Bootstrap JS -->
    <script src="js/boot/bootstrap.js"></script>
    <!--<script src="js/boot/bootstrap.min.js"></script>-->

    <!--Other Js files-->    
    <script src="js/main.js"></script>
    <script src="js/owl/owl.carousel.js"></script>

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?

I was asked to add the second carousel i am using on the page, below is the html/js for said carousel

<div id="owl" class="owl-carousel owl-theme">
                <div class="item first-item">
                    <div class="products-images">
                        <a href="./img/catalog/9-Assortments-Storage.pdf"     target="_blank">Assortments</a>
                    </div>
                </div>
                <div class="item">
                    <div class="products-images">
                        <a href="./img/catalog/4-Tools.pdf"               target="_blank">Tools</a>
                    </div>
                </div>
                <div class="item">
                    <div class="products-images">
                        <a href="./img/catalog/4-Tools.pdf" target="_blank">Cutting Tools</a>
                    </div>
                </div>
                <div class="item active">
                    <div class="products-images ">
                        <a href="./img/catalog/7-Brass.pdf" target="_blank">Fittings</a>
                    </div>
                </div>
                <div class="item">
                    <div class="products-images">
                        <a href="./img/catalog/6-Electrical.pdf" target="_blank">Electrical</a>
                    </div>
                </div>
                <div class="item">
                    <div class="products-images">
                        <a href="./img/catalog/1-Fasteners.pdf" target="_blank">Fasteners</a>
                    </div>
                </div>
                <div class="item">
                    <div class="products-images">
                        <a href="./img/catalog/2014Safety.pdf" target="_blank">Saftey</a>
                    </div>
                </div>
                <div class="item">
                    <div class="products-images">
                        <a href="./img/catalog/5-ShopSupplies.pdf" target="_blank">Shop Supplies</a>
                    </div>
                </div>
                <div class="item">
                    <div class="products-images">
                        <a href="./img/catalog/2-Rivets-Huck.pdf" target="_blank">Rivets</a>
                    </div>
                </div>
                <div class="item">
                    <div class="products-images">
                        <a href="./img/catalog/2014CustomPackaging.pdf" target="_blank">Custom Packaging</a>
                    </div>
                </div>
                <div class="item">
                    <div class="products-images">
                        <a href="./img/catalog/3-Chemicals.pdf" target="_blank">Chemicals</a>
                    </div>
                </div>
            </div>
<script type="text/javascript">
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
        }
        }
    });
});
</script>

Looks like there's a typo. The ID of your owl div is `owl2`, but in your jQuery where you initialize the carousel, you call it `owl`. — TheRotag, Apr 12 '16 at 20:11
What's (not) happening then? The carousel isn't being displayed? — mferly, Apr 12 '16 at 20:14
JavaScript errors? Post anything/everything that might be of help. For all I know `js/owl/owl.carousel.js` isn't the right path, know what I mean? What does your debugging tool (Chrome/Firefox) say? Anything? — mferly, Apr 12 '16 at 20:16
@Marcus sadly there are no JS errors, nothing at all. One of the reasons why im having so much trouble, I have also tried just about every version of jQuery, I saw somewhere on here that said that could be the issue, sadly it did not work — Sam R, Apr 12 '16 at 20:19
CSS issue then, perhaps. What's the visibility on `.container`, `.row`, `#owl2`, `.owl-carousel`? And you stated you were using the 'wrong code' already. You're sure you have the *right* code in there now? And are pushing the *correct* file to the server? if you view the course in the browser, is everything there as expected? — mferly, Apr 12 '16 at 20:23
@Marcus I am possitive i am using the correct code. Both carousels are on the same page. Also, I just tested using owl carousel 1, it works with no issues. However I need owl 2 because of its additional options. Also I cant seem to find the documentation for owl 1 — Sam R, Apr 12 '16 at 20:25
So you have multiple (2) carousels on the same page, currently? One being Owl v1 and one being Owl v2? Could be some conflicting javascript. Or do you just have 2 carousels, both using Owl v2 codebase? — mferly, Apr 12 '16 at 20:27
Can you post where/how you're instantiating the other carousel too. As well as its HTML markup. — mferly, Apr 12 '16 at 20:31
@Marcus iwill edit the main post to add the other carousel, it shouldnt make a difference tho, since they were both working with with carousel 1 — Sam R, Apr 13 '16 at 13:25

score 3 · Accepted Answer · answered Apr 13 '16 at 13:37

SOLVED

So the issue seemed to be my owl.carousel.min.js file AND my css files, I downloaded the newest version when I started. However when using this link

    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css">

It started working. not sure if the file I downloaded was corrupted somehow but no matter. Its working now. Hope this helps someone out in the future!!

Special thanks to @Marcus who talked with me for a while yesterday trying to help me fix this issue. Thanks a bunch bud!

score 0 · Answer 2 · answered Apr 12 '16 at 20:12

0

Change id="owl2" to id="owl"

Or change ('#owl') to ('#owl2'). Whichever you like.

answered Apr 12 '16 at 20:12

mferly

1,646
1
13
19

sorry i have 2 carousels and i didnt notice i posted the wrong code, i have just made the correction. Thanks for catching that – Sam R Apr 12 '16 at 20:13

Owl Carousel 2 sets itself to display none

2 Answers2