在项目中使用 Owl Carousel

如何解决在项目中使用 Owl Carousel

我试图在我的项目中使用猫头鹰轮播，但不知何故没有显示任何内容，我不知道它有什么问题。谁能帮助我理解我做错了什么？我已按照本教程 https://github.com/OwlCarousel2/OwlCarousel2 中的步骤进行操作，并且还尝试检查元素，但没有显示错误，也没有显示轮播。这是我的 html 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    <script src="https://kit.fontawesome.com/e7db147a51.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="/node_modules/owl.carousel/dist/assets/owl.carousel.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" />
    <link rel="stylesheet" href="index.css">

    
</head>
<body>
    <div class="owl-carousel owl-theme">
        <div class="item"><img src="https://via.placeholder.com/150"></div>
        <div class="item"><img src="https://via.placeholder.com/150"></div>
        <div class="item"><img src="https://via.placeholder.com/150"></div>
    </div>
</body>
<script src="jquery-3.5.1.min.js"></script>
<script src="index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcop+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>
<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="/node_modules/owl.carousel/dist/owl.carousel.min.js"></script>
</html>

这里是js代码：

$('.owl-carousel').owlCarousel({
    stagePadding: 50,loop:true,margin:10,nav:true,navText: [
    "<i class='fa fa-caret-left'></i>","<i class='fa fa-caret-right'></i>"
  ],responsive:{
        0:{
            items:1
        },600:{
            items:3
        },1000:{
            items:5
        }
    }
})

解决方法

检查我的答案。它的工作。您需要像这样初始化 owlCarousel $('.owl-carousel').owlCarousel();。

检查这个demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    <script src="https://kit.fontawesome.com/e7db147a51.js" crossorigin="anonymous"></script>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
    <link rel="stylesheet" href="index.css">

    
</head>
<body>
    <div class="owl-carousel owl-theme">
        <div class="item"><img src="https://via.placeholder.com/1200"></div>
        <div class="item"><img src="https://via.placeholder.com/1200"></div>
        <div class="item"><img src="https://via.placeholder.com/1200"></div>
    </div>
</body>
<script src="jquery-3.5.1.min.js"></script>
<script src="index.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" ></script>
<script>
$(document).ready(function(){
  $('.owl-carousel').owlCarousel({
loop:true,margin:10,nav:true,responsive:{
    0:{
        items:1
    },600:{
        items:3
    },1000:{
        items:5
    }
}
})
});
</script>
</html>