猫头鹰旋转木马不存在
Owl carousel non existant
我尝试了很多方法来重新排列js文件中的代码,通过脚本和在这里找到的许多其他东西进行重新排列,但不幸的是,它仍然不起作用。我再也不知道该做什么了。
<!DOCTYPE html>
<html lang="en"> <
head><title> Audi Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="fonts/font-awesome/css/font-awesome.css">
<!-- Slider
================================================== -->
<link href="css/owl.carousel.css" rel="stylesheet" media="screen">
<link href="css/owl.theme.css" rel="stylesheet" media="screen">
<!-- Stylesheet
================================================== -->
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,600,300' rel='stylesheet' type='text/css'>
<script tyupe="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.min.js"></script>
</head>
<body>
<!-- Loader -->
<!-- Navigation
==============================-->
<nav id="menu" class="navbar navbar-default navbar-fixed-top">
<img src="img/audi-logo3.jpg" class="img-responsive pull-right" style="margin- right: 15px">
<div clas="collapse navbar-collapse">
<div class="nav-container">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left" style="margin-top: 10px;">
<li><a href="#" class="page-scroll">Home</a></li>
<li><a href="#" class="page-scroll"> Models</a></li>
<li><a href="#" class="page-scroll">Owners & Customers</a> </li>
<li><a href="#" class="page-scroll">Shopping Tools</a></li>
<li><a href="#" class="page-scroll">Global Inovation</a></li>
</ul>
</div>
</div>
</nav>
</div>
</nav>
<section style="margin-top: 85px;">
<div class="owl-carousel">
<div>
<img src="img/audi-r8.jpg">
</div>
<div>
<img src="img/audi-s8.jpg">
</div>
</div>
</section>
<!-- Script -->
<script type="text/javascript" src="owl-carousel/owl.carousel.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
我的JS
(function(){
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
})
});
})
从head
部分删除script
标记,因为它们已经位于body
标记的底部。
问题是由您在那里使用的订单引起的。如果您需要在自己的代码中使用库,则必须首先声明该库。您的head
部分并非如此。它应该与您在body
部分底部的内容一致。
此外,我没有看到jQuery的任何script
标签,但您正在使用它
就在</body>
:之前
<!-- This script is hosted on a CDN, but you could host it too -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
首先,我注意到一个打字错误
<!-- Stylesheet
================================================== -->
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800,600,300' rel='stylesheet' type='text/css'>
THIS ONE --> <script **tyupe**="text/javascript" src="js/custom.js"></script>
<script type="text/javascript" src="owl-carousel/owl.carousel.min.js"></script>
</head>
此外,我看到您正在HTML底部加载相同的2个脚本,但都是未缩小的版本。你应该删除没有使用的内容,并修复拼写错误。
如果你想用HTML验证/检查你的文件,你就会发现那个打字错误。可能值得一做,因为可能还有其他简单的错误。
你需要加载一个jQuery文件吗?确保它在javascript文件
相关文章:
- 知道为什么我的旋转木马不会自动更改图片吗
- 带有JQuery和CSS的3D旋转木马-渲染不正确
- 如何在猫头鹰旋转木马中滑动所有可见项目,而不是使用上一个/下一个按钮
- Ruby on Rails - 引导旋转木马按钮不起作用
- 猫头鹰旋转木马不存在
- 猫头鹰旋转木马2动画不工作
- 旋转木马;不起作用
- 回调事件不起作用-使用猫头鹰旋转木马
- 猫头鹰旋转木马2不工作Magento
- 光滑的旋转木马 - 不停歇的表演
- 猫头鹰旋转木马不起作用,也许我链接不正确
- 为什么我的猫头鹰旋转木马在我的第一组中不起作用?请问我的错误在哪里
- 猫头鹰旋转木马不会自动播放
- TwitterBootstrap 3旋转木马不工作
- 可以'我不能让旋转木马工作
- OWL旋转木马2宽度不正确,显示所有项目
- Bootstrap旋转木马不工作
- 滑动旋转木马不工作
- 引导程序旋转木马控件不工作
- <img>高度CSS在旋转木马中使用百分比调整大小不正确