<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 5 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 5 年前。
我从 Bootstrap 网站复制了代码来创建一个简单的轮播，但它不起作用，我不明白为什么，因为我从 CDN 中包含了 Bootrap css、jquery 和 Bootstrap js，这是我的 index.html 的代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Kebabus</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="http://api.naans.fr/pictures/5a2bf196a2ca1747ec24ce82" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://api.naans.fr/pictures/5a2bf196a2ca1747ec24ce82" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://api.naans.fr/pictures/5a2bf196a2ca1747ec24ce82" alt="Third slide">
</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>
</div>
</div>
<script
src="http://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$('.carousel').carousel({
interval: 2000
})
</script>
</body>
</html>我的浏览器控制台出现以下错误:
TypeError: f[0] is undefined
最佳答案
您的代码片段中的问题是您使用了带有版本 4 html 标记的版本 3 Bootstrap javascript。
好了，这是 v4 Bootstrap 轮播:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Kebabus</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="http://api.naans.fr/pictures/5a2bf196a2ca1747ec24ce82" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://api.naans.fr/pictures/5a2bf196a2ca1747ec24ce82" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://api.naans.fr/pictures/5a2bf196a2ca1747ec24ce82" alt="Third slide">
</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>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$('.carousel').carousel({
interval: 2000
});
</script>
</body>
</html>关于html - Bootstrap 4 轮播不按预期运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48833449/