CODEWITHSUNDEEP
owl-carousel
SalMan13
SalMan13

Reputation: 11

owl-carousel not show anything

I have a problem with a owl carousel, i add this code in HTML file:

<html>
<head>
    <link rel="stylesheet" href="owl-carousel/owl.carousel.css">
    <!-- Default Theme -->
    <link rel="stylesheet" href="owl-carousel/owl.theme.css"
    <!--  jQuery 1.7+  -->
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <!-- Include js plugin -->
    <script src="owl-carousel/owl.carousel.js"></script> 
</head>
<body>
    <div id="owl-demo" class="owl-carousel owl-theme">  
        <div class="item"><h1>1</h1></div>
        <div class="item"><h1>2</h1></div>
        <div class="item"><h1>3</h1></div>
        <div class="item"><h1>4</h1></div>
        <div class="item"><h1>5</h1></div>
        <div class="item"><h1>6</h1></div>
        <div class="item"><h1>7</h1></div>
        <div class="item"><h1>8</h1></div>
        <div class="item"><h1>9</h1></div>
        <div class="item"><h1>10</h1></div>
        <div class="item"><h1>11</h1></div>
        <div class="item"><h1>12</h1></div>
    </div>
</body>

but the navigator show me the numbers in a one column, without format. I have all the owl carousel in correct folders. Which is the problem?

The navigator is a google chrome and is the last version.

Thanks for all responses

Upvotes: 1

Views: 9724

Answers (2)

Abdullah
Abdullah

Reputation: 351

Simple Call OwlCarousel like this, it will work.

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#owl-example").owlCarousel();
});
</script>

Upvotes: 1

Saeed Adreno
Saeed Adreno

Reputation: 35

Call the Owl initializer function and your carousel is ready.

Add below code before </body> tag :

<script>
$(document).ready(function() {

  $("#owl-demo").owlCarousel();

});
</script>

Or:

<script>
    $(document).ready(function() {

      var owl = $("#owl-demo");

      owl.owlCarousel({
          items : 10, //10 items above 1000px browser width
          itemsDesktop : [1000,5], //5 items between 1000px and 901px
          itemsDesktopSmall : [900,3], // betweem 900px and 601px
          itemsTablet: [600,2], //2 items between 600 and 0
          itemsMobile : false // itemsMobile disabled - inherit from itemsTablet option
      });
    });
</script>

Upvotes: 0

Related Questions