Question

我知道这个问题在Stack Overflow中是重复的。在Stack Overflow以及其他网站文章中，我经历了很多问题和解答。我该如何使Owl-Carousel工作？

问题很简单，猫头鹰轮播无法正常工作。我遵循了文档以及Stack Overflow中提供的一些答案。

我将代码粘贴到这里。

<!-- cdn script imports-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>

<!-- cdn css import -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">

<!-- html -->
<div class="owl-carousal owl-theme">
  <div>
    slider 1
  </div>
  <div>
    slider 2
  </div>
  <div>
    slider 3
  </div>
  <div>
    slider 4
  </div>
</div>

我的JS

 $(document).ready(function() {
  $('.owl-carousel').owlCarousel();
});

这是什么问题？

Answer 1

您的拼写错误更改为<< strong> owl-carousal ”，购买价格为<< strong> owl-carousel ” / p>

<div class="owl-carousal owl-theme"> <-------- owl-carousel not owl-carousal
<div>
  slider 1
</div>
 ...

这里工作的pen

猫头鹰轮播无法正常工作

1 个答案: