Owl-carousel copy example

Question

I have this sample:

link

$(document).ready(function() {

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

      autoPlay: 3000, //Set AutoPlay to 3 seconds

      items : 3,
      itemsDesktop : [1199,3],
      itemsDesktopSmall : [979,3]

  });

});

#owl-demo .item{
  margin: 3px;
}
#owl-demo .item img{
  display: block;
  width: 100%;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>
<div id="owl-demo">

  <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/owl1.jpg" alt="Owl Image"></div>
  <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/owl2.jpg" alt="Owl Image"></div>
  <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/owl3.jpg" alt="Owl Image"></div>
  <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/owl4.jpg" alt="Owl Image"></div>
  <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/owl5.jpg" alt="Owl Image"></div>
  <div class="item"><img src="ahttp://www.owlgraphic.com/owlcarousel/demos/assets/owl6.jpg" alt="Owl Image"></div>
</div>

</div>

I tried to reproduce this example

link

In my example things do not work as they should. Can you tell me please what is the problem?

Thanks in advance!

Solution 1

There is no problem with your code , i think you have missed the owl-carousal.css and owl-carousal.js just check with that too, you can download it from the site , you can check this working version

    $(document).ready(function() {
     
      $("#owl-demo").owlCarousel({
     
          autoPlay: 3000, //Set AutoPlay to 3 seconds
     
          items : 4,
          itemsDesktop : [1199,3],
          itemsDesktopSmall : [979,3]
     
      });
     
    });

    #owl-demo .item{
      margin: 3px;
    }
    #owl-demo .item img{
      display: block;
      width: 100%;
      height: auto;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css" rel="stylesheet"/>
<div id="owl-demo">
              
      <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/owl1.jpg" alt="Owl Image"></div>
      <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/owl2.jpg" alt="Owl Image"></div>
      <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/owl3.jpg" alt="Owl Image"></div>
      <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/owl4.jpg" alt="Owl Image"></div>
      <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/owl5.jpg" alt="Owl Image"></div>
      <div class="item"><img src="ahttp://www.owlgraphic.com/owlcarousel/demos/assets/owl6.jpg" alt="Owl Image"></div>
    </div>
    
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>

Solution 2

You forget to add owl-carousal.css in your code. add this link in your code.

<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.0/assets/owl.carousel.css" rel="stylesheet"/>

Solution 3

It seems you missed adding OWL Library in your code, here is the complete example

$(document).ready(function() {

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

    autoPlay: 3000, //Set AutoPlay to 3 seconds

    items: 3,
    itemsDesktop: [1199, 3],
    itemsDesktopSmall: [979, 3]

  });

});

#owl-demo .item {
  margin: 3px;
}
#owl-demo .item img {
  display: block;
  width: 100%;
  height: auto;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" rel="stylesheet" />

<div id="owl-demo">

  <div class="item">
    <img src="http://www.owlgraphic.com/owlcarousel/demos/assets/owl1.jpg" alt="Owl Image">
  </div>
  <div class="item">
    <img src="http://www.owlgraphic.com/owlcarousel/demos/assets/owl2.jpg" alt="Owl Image">
  </div>
  <div class="item">
    <img src="http://www.owlgraphic.com/owlcarousel/demos/assets/owl3.jpg" alt="Owl Image">
  </div>
  <div class="item">
    <img src="http://www.owlgraphic.com/owlcarousel/demos/assets/owl4.jpg" alt="Owl Image">
  </div>
  <div class="item">
    <img src="http://www.owlgraphic.com/owlcarousel/demos/assets/owl5.jpg" alt="Owl Image">
  </div>
  <div class="item">
    <img src="ahttp://www.owlgraphic.com/owlcarousel/demos/assets/owl6.jpg" alt="Owl Image">
  </div>
</div>

</div>

Comments

[Jishnu V S]

@john Smithe Did your check with this snippet ? is this working for you