使用 Carousel 时 Jquery / Bootstrap “未捕获的类型错误”
Posted
技术标签:
【中文标题】使用 Carousel 时 Jquery / Bootstrap “未捕获的类型错误”【英文标题】：Jquery / Bootstrap "Uncaught TypeError" when using Carousel 【发布时间】：2018-09-25 17:05:39 【问题描述】：我一直在尝试在我正在制作的这个网站中实现一个简单的图像轮播。现在是非常基本的页面，这是我链接 CSS 和 javascripts 的顺序
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="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>
我明白首先链接jquery的重要性，这就是我所做的。这就是我的轮播代码的样子。
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/badminton.jpg" >
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/football1.jpg" >
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/pool.jpg" >
</div>
</div>
如您所见，我基本上从他们的网站上复制了一个，只是为了让它工作。我的第一张图片加载但是尝试单击下一个箭头会给我以下错误
Console log error of jquery / bootstrap conflict
我在网上查看过，对于哪个 jquery 应该使用哪个版本的引导程序似乎没有达成共识。任何帮助将不胜感激，谢谢。
【问题讨论】：
【参考方案1】：您需要新版本的 Bootstrap。试试我的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="img/badminton.jpg" >
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/football1.jpg" >
</div>
<div class="carousel-item">
<img class="d-block w-100" src="img/pool.jpg" >
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous"></script>
</body>
</html>
</body>
</html>
[with no error][1]【讨论】：
这真是太棒了，非常感谢，一个简单的轮播实现多么尴尬，似乎很容易崩溃，再次感谢！【参考方案2】：我可以推荐的唯一更改是从幻灯片 <divs> 的类名中删除单词“carousel”，如下所示：
<div class="item active">
像这样：
<div class="item">
这适用于 Bootstrap 3.3.7。我还没有评论 4.0。
【讨论】：
以上是关于使用 Carousel 时 Jquery / Bootstrap “未捕获的类型错误”的主要内容，如果未能解决你的问题，请参考以下文章
停止 Vimeo 在 Jquery Infinite Carousel 中的上一个/下一个按钮上嵌入
JQuery Validate 不适用于 Bootstrap Carousel 中的表单
jquery Owl Carousel：如何使当前幻灯片集中