我一直在试图解决它,但没有任何解决方案可能会有所帮助。我一直在关注官方安装文档。
我的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的数据不可见

最佳答案

我认为您已经放入double $('.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>

10-05 20:58
查看更多