简体   繁体   English

猫头鹰轮播未显示

[英]Owl carousel not showing up

I am trying to get this owl thing going and its really pushing me back on a project. 我正在努力使这头猫头鹰事情继续进行,这确实使我重回了一个项目。

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

What am I doing wrong? 我究竟做错了什么?

Here is the working code, you missed autoplay prop in the configuration 这是工作代码,您在配置中错过了自动播放道具

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM