猫头鹰旋转木马不显示

我没有使用jquery做任何事情，很少使用JavaScript，并且我试图添加一个带有一些图像的Owl Carousel到我的页面。我已经从他们的网站粘贴代码，这在理论上应该工作，变量名称似乎加起来，但它没有显示在我的页面上。对不起，这对我来说都是新的，我似乎在其他地方找不到任何答案。

HTML

<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="EvositeCSS.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="OwlCarousel/owl-carousel/owl.carousel.css">
<!-- Default Theme -->
<link rel="stylesheet" href="OwlCarousel/owl-carousel/owl.theme.css">
<script src="EvositeJS.js"> </script>
</head>
<div id="owl-demo" class="owl-carousel">
<div class="item"> <img src="Images/EvositeLogo.PNG"> </div> 
<div class="item"> <img src="Images/DiabetesUKLogo.PNG"> </div>
</div>

CSS

#owl-demo .item{
margin: 3px;
}
#owl-demo .item img{
display: block;
width: 100%;
height: auto;
}

JavaScript

$(document).ready(function() {
$("#owl-demo").owlCarousel({
  autoPlay: 3000, //Set AutoPlay to 3 seconds
  items : 4,
  itemsDesktop : [1199,3],
  itemsDesktopSmall : [979,3]
 });
 });

您忘记按如下方式引用owl.carousel.js文件:

<script src="assets/owl-carousel/owl.carousel.js"></script>

除了添加js文件，你的CSS文件路径可能不正确

如果您使用以下路径

添加了脚本

<script src="assets/owl-carousel/owl.carousel.js"></script>

则CSS路径应为

<link rel="stylesheet" href="assets/owl-carousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="assets/owl-carousel/owl-carousel/owl.theme.css">

对于响应式屏幕项目限制也使用

    responsive : {
        480 : { items : 4  },
        768 : { items : 6  },
        1024 : { items : 8
        }
    },

Jquery 1.11.3版本不支持Carousel 1.3.3，您必须降级到Jquery 1.8x或更新Owlcarousel到最新版本

相关内容

最新更新

热门标签：