OwlCarousel2 显示空白幻灯片，而其他 HTML 标签显示正常

Question

我一直在尝试修复它，但没有找到任何可能有帮助的解决方案。我一直在关注官方安装文档。我的Owlcarousel2版本是2.3.4，我试过其他版本，都是一样的。 OwlCarousel old 工作正常但 Owlcarousel2 不是。这是我的 HTML

<html>
<head>

<link href="OwlCarousel/assets/owl.theme.default.min.css" rel="stylesheet" />
<link href="OwlCarousel/assets/owl.carousel.min.css" rel="stylesheet" />

<script>

$(document).ready(function() {
$('.owl-carousel').owlCarousel({
  $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

</script>

<style>#owl-demo .item {
    border:solid;
  margin: 3px;
}
</style>

</head>

</html>
<body>
    <h1>Owl</h1>
<div class="owl-carousel owl-theme">
    <div class="item"><img src="images/FEATURE1.PNG"></div>
    <div class="item"><img src="images/FEATURE2.PNG"></div>
    <div class="item"><img src="images/FEATURE3.PNG"></div>
    <div class="item"><img src="images/FEATURE4.PNG"></div>
    <div class="item"><img src="images/FEATURE5.PNG"></div>
    <div class="item"><img src="images/FEATURE6.PNG"></div>

</div>

<h1>Owl</h1>

<script src="OwlCarousel/owl.carousel.js"></script>
<script src="OwlCarousel/jquery.min.js"></script>
</body>

<h1>Owl</h1>正在显示，但 class .owl-carousel 的数据不可见

Answer 1

我想你放了双$('.owl-carousel').owlCarousel({..})。

改用这个：

<script>
   $(document).ready(function() {
     $('.owl-carousel').owlCarousel({
       loop:true,
       margin:10,
       nav:true,
       responsive:{
           0:{
               items:1
           },
           600:{
               items:3
           },
           1000:{
               items:5
           }
       }
   });
   });

</script>

Answer 2

终于理清了主要原因。这只是脚本的放置顺序。很明显，我们应该在 javascript 之前使用 jquery.js 和 owl-carousel.js 来初始化轮播。

<html>
<head>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<link href="owl/owl.carousel.min.css" rel="stylesheet" type="text/css"/>
<link href="owl/owl.theme.default.min.css" rel="stylesheet" type="text/css"/>

<style>

.item{
border:solid;
}
</style>
</head>

</html>
<body style="overflow: hidden;">
    <h1>Owl</h1>
    <hr/>


<div class="row" >
<div class="owl-carousel col-6" style="">
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>

</div>
</div>

<script src="owl/jquery-2.2.4.min.js"></script>
<script 
src="owl/owl.carousel.min.js"></script>

<script>

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

</script>

<hr/>    
<h1>Owl</h1>

</body>

Answer 3

一切都很好，而不是放置脚本。您必须遵循此顺序。 1: jquery 2: owl.carousel.js 3：然后调用owlcarousel

    <html>
<head>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<link href="owl/owl.carousel.min.css" rel="stylesheet" type="text/css"/>
<link href="owl/owl.theme.default.min.css" rel="stylesheet" type="text/css"/>

<style>

.item{
border:solid;
}
</style>
</head>

</html>
<body style="overflow: hidden;">
    <h1>Owl</h1>
    <hr/>

<div class="row" >
<div class="owl-carousel col-6" style="">
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>
    <div class="item"><h1>Data</h1></div>

</div>
</div>

<script src="owl/jquery-2.2.4.min.js"></script>
<script 
src="owl/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>

<hr/>    
<h1>Owl</h1>

</body>

Answer 4

尝试删除行 space

OwlCarousel2 显示空白幻灯片，而其他 HTML 标签显示正常

OwlCarousel2 shows blank slides while every other HTML tags are showing up fine

html

javascript

css

owl-carousel-2