【问题标题】:Owl carousel not showing up猫头鹰旋转木马没有出现
【发布时间】:2015-05-20 18:19:03
【问题描述】:

我正在努力让这个猫头鹰的事情继续下去,它真的把我推回了一个项目。

<html>    
<head>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
</head>

<body>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script>
$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})
</script>
<div class="owl-carousel">
    <div class="item"><img src = "img/bg1.jpg"></div>
    <div class="item"><img src = "img/bg2.jpg"></div>
    <div class="item"><img src = "img/bg3.jpg"></div>
    <div class="item"><img src = "img/bg4.jpg"></div>
    <div class="item"><img src = "img/bg5.jpg"></div>
    <div class="item"><img src = "img/bg6.jpg"></div>
    <div class="item"><img src = "img/bg7.jpg"></div>
    <div class="item"><img src = "img/bg8.jpg"></div>
    <div class="item"><img src = "img/bg9.jpg"></div>
    <div class="item"><img src = "img/bg10.jpg"></div>
    <div class="item"><img src = "img/bg11.jpg"></div>
    <div class="item"><img src = "img/bg12.jpg"></div>
</div>    
</body>    
</html>

我做错了什么?

【问题讨论】:

标签: jquery html css twitter-bootstrap carousel


【解决方案1】:

这是工作代码,你错过了配置中的自动播放道具

$(document).ready(function(){
  
$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    autoPlay: 1000,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

<div class="owl-carousel">
    <div class="item"><img src = "http://placehold.it/350x150"></div>
    <div class="item"><img src = "http://placehold.it/350x150"></div>
    <div class="item"><img src = "http://placehold.it/350x150"></div>
    <div class="item"><img src = "http://placehold.it/350x150"></div>
    <div class="item"><img src = "http://placehold.it/350x150"></div>
    <div class="item"><img src = "http://placehold.it/350x150"></div>
    <div class="item"><img src = "http://placehold.it/350x150"></div>
    <div class="item"><img src = "http://placehold.it/350x150"></div>
    <div class="item"><img src = "http://placehold.it/350x150"></div>
    <div class="item"><img src = "http://placehold.it/350x150"></div>
    <div class="item"><img src = "http://placehold.it/350x150"></div>
    <div class="item"><img src = "http://placehold.it/350x150"></div>
</div>

【讨论】:

  • 您好,感谢您的回复。我一定是做错了什么我像你说的那样添加了自动播放功能,但仍然没有。
  • 检查这里嵌入的代码sn-p,它运行正常。您是否添加了任何冲突的库?
  • 不,我实际上完全复制了你所做的,没有工作。我不知道我做错了什么......很奇怪。
  • 当我删除 js 文件(jquery 库和 owl.carousel.min.js)时,图像显示但就像一个在另一个之上,我认为它与 jquery 有关。
  • 开始工作了!我再次尝试了您的代码,它成功了,谢谢!你推荐使用你正在使用的这些库吗?
猜你喜欢
  • 2021-10-20
  • 1970-01-01
  • 2022-06-28
  • 2021-10-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多