CODEWITHSUNDEEP
jqueryowl-carousel-2
Jack Sewell
Jack Sewell

Reputation: 7

Owl carousel 2 not showing up

I have set up everything correctly (at least I think so) but the owl carousel will not show up/load. Any help? Thanks in advance.

Here's my HTML:

<head>
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/css/owl.theme.default.css">
</head>

<body>

        <div class="owl-carousel">
      <div><img src="assets/images/Profile-Holder.png"></div>
      <div><img src="assets/images/Profile-Holder.png"></div>
      <div><img src="assets/images/Profile-Holder.png"></div>
    </div>  

        <script href="assets/js/jquery-1.12.2.min.js"></script>
    <script href="assets/js/owl.carousel.min.js"></script>
            <script>$(document).ready(function(){
              $(".owl-carousel").owlCarousel();
            });
    </script>
</body>

Upvotes: 0

Views: 4799

Answers (1)

Donny West
Donny West

Reputation: 720

Try adding the class "owl-theme" to your "owl-carousel" div.

Looks like the problem is actually your script tags...change "href" to "src".

Owl Carousel defaults to showing 3 items...coincidentally the number of elements you have in the carousel. Try initiating the script with the following inside your document ready function:

$('.owl-carousel').owlCarousel({
  center: true,
  items:1
});

Upvotes: 3

Related Questions