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>

​

Answer 2

您忘记在代码中添加owl-carousal.css。在您的代码中添加此链接。

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

Answer 3

您似乎错过了在代码中添加OWL库，下面是完整的示例

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

​