Question

我有这个样本：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

我试图重现这个例子

link

在我的例子中，事情不能正常工作。请问能告诉我什么问题？

提前致谢！

Answer 1

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

＆＃13;
＆＃13;
$(document).ready(function() { $("#owl-demo").owlCarousel({ autoPlay: 3000, //Set AutoPlay to 3 seconds items : 4, itemsDesktop : [1199,3], itemsDesktopSmall : [979,3] }); });
＆＃13;
#owl-demo .item{ margin: 3px; } #owl-demo .item img{ display: block; width: 100%; height: auto; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

猫头鹰旋转木马复制示例

2 个答案: