Javascript OwlCarousel2显示空白幻灯片，而其他HTML标记显示良好_Javascript_Html_Css_Owl Carousel 2

Javascript OwlCarousel2显示空白幻灯片，而其他HTML标记显示良好

javascript html css

Javascript OwlCarousel2显示空白幻灯片，而其他HTML标记显示良好,javascript,html,css,owl-carousel-2,Javascript,Html,Css,Owl Carousel 2,我一直在努力解决这个问题，但没有任何解决办法。我一直在遵循官方的安装文档。我的Owlcarousel2版本是2.3.4，我试过其他版本，都是一样的。OwlCarousel old工作正常，但Owlcarousel2工作不正常。这是我的HTML <html> <head> <link href="OwlCarousel/assets/owl.theme.default.min.css" rel="stylesheet" /> <link href="

我一直在努力解决这个问题，但没有任何解决办法。我一直在遵循官方的安装文档。我的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>


$（文档）.ready（函数（）{
$（'.owl carousel'）。owl carousel({
$（'.owl carousel'）。owl carousel({
循环：对，
差额：10，
导航：是的，
响应：{
0:{
项目：1
},
600:{
项目：3
},
1000:{
项目：5
}
}
})
#猫头鹰演示{
边框：实心；
保证金：3倍；
}
猫头鹰
猫头鹰

Owl

正在显示，但是类

.Owl carousel

的数据是不可见的

我想你放了一个双

$（'.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>


$（文档）.ready（函数（）{
$（'.owl carousel'）。owl carousel({
循环：对，
差额：10，
导航：是的，
响应：{
0:{
项目：1
},
600:{
项目：3
},
1000:{
项目：5
}
}
});
});

我终于找出了主要原因。这只是脚本的放置顺序。很明显，我们应该在javascript之前使用

jquery.js

和

owl carousel.js

来初始化carousel

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


.项目{
边框：实心；
}
猫头鹰

资料
资料
资料
资料
资料
资料
资料
$（文档）.ready（函数（）{
$（“.owl carousel”）.owlCarousel（）；
});

猫头鹰

除了脚本的放置，一切都很好。您必须遵循以下顺序。 1:

jquery

owl.carousel.js

3：那就打电话给猫头鹰狂欢节

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


.项目{
边框：实心；
}
猫头鹰

资料
资料
资料
资料
资料
资料
资料
$（文档）.ready（函数（）{
$（'.owl carousel'）。owl carousel({
循环：对，
差额：10，
导航：是的，
响应：{
0:{
项目：1
},
600:{
项目：3
},
1000:{
项目：5
}
}
});
});

猫头鹰

检查您的浏览器控制台，它会告诉您，

未定义。您需要在开始使用$之前嵌入jQuery脚本。这很好。我认为主要问题可能是脚本的放置顺序。感谢您的回复