Question

我没有使用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]

 });

 });

Answer 1

您忘记引用owl.carousel.js文件，如下所示：

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

Answer 2

除了添加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
        }
    },

Answer 3

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

猫头鹰旋转木马没有显示

3 个答案: