javascript - 在解决以下问题时面临问题
问题描述
试试这个代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>Owl Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
</head>
<body>
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});
</script>
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
</body>
</html>
我正在尝试在我的新项目中使用 owl carousel,但似乎 owl carousel 无法正常工作,我已尝试使用上面的代码不知道我哪里出错了请任何人帮助我,以便帮助我修复这个问题,由于我是这个领域的新手,我无法解决这个问题,请任何人都可以帮助我解决这个问题
解决方案
<script src="jquery.min.js"></script>
从最后删除
并像下面一样初始化 Carousel
jQuery(document).ready(function() {
jQuery(".owl-carousel").owlCarousel({
});
});
或试试这个代码
jQuery(document).ready(function() {
jQuery(".owl-carousel").owlCarousel({});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Owl Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
</head>
<body>
<div class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
</body>
</html>
推荐阅读
- android - Android API 28 和 Roboelectric 4.0-alpha-3 抛出 Realm lib 错误
- angularjs - 引导工具提示:如果绑定变量值为空,则隐藏工具提示
- youtube - Youtube API - 来自频道统计的视频数量与上传的视频数量之间的差异
- c++ - 通常使用什么方法来检测时间情况?
- c++ - 如何在派生构造函数中多次构造基类
- c++ - 在模板类中初始化一个静态 constexpr 成员
- amazon-web-services - 验证 Cognito 令牌 (Node.JS)
- python - matplotlib:减少饼图上的标签数量
- mongodb - Mongo db查询多个条件
- python - 如何在外部 webgui 上查看 Opendaylight 拓扑