Owl 轮播未按预期工作

Question

我知道这个问题在 Stack Overflow 中重复了。我在 Stack Overflow 和其他站点文章中浏览了很多问题和答案。如何让我的 Owl-Carousel 工作？

问题很简单，owl-轮播不工作。我遵循了文档以及 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

你有一个拼写错误更改 "owl-carousal" buy "owl-carousel" 在

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

这里是工作 pen

Owl 轮播未按预期工作

Owl Carousel not working as expected

jquery

owl-carousel