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>出现了，但类.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：然后打电话给猫头鹰

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

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

3 个答案: