javascript - Owl Carousel 复制示例

Question

我有这个样本:

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>

我尝试重现这个例子

link

在我的示例中，事情没有按预期进行。 你能告诉我问题是什么吗？

提前致谢!

Answer 1

您的代码没有问题，我认为您错过了 owl-carousal.css 和 owl-carousal.js 只需检查一下即可，您可以从网站下载，您可以查看此工作版本

    $(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>