John Smithe John Smithe - 10 days ago 5
CSS Question

Owl-carousel copy example

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!

Answer

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>