如何解决Bootstrap 4 Card Carousel 未显示多个项目
关于错误 https://gifyu.com/image/5JCX
的 GIF 文件卡片轮播代码取自 https://www.codeply.com/go/EIOtI7nkP8/bootstrap-carousel-with-multiple-cards
那个网站的CSS代码和JS代码是一样的。 CSS 文件已链接。 js文件最后是这样写的
<script type="text/javascript">
</script>
我在 Card Carousel 编辑器中使用的代码。
<head>
<title>Yogi</title>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
v class="container-fluid bg-display">
<div class="container text-center my-3">
<h2 class="font-weight-light">Bootstrap 4 - Multi Item Carousel</h2>
<div class="row mx-auto my-auto">
<div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
<div class="carousel-inner w-100" role="listBox">
<div class="carousel-item active">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
</div>
</div>
</div>
</div>
<a class="carousel-control-prev w-auto" href="#recipeCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
<span class="sr-only">PrevIoUs</span>
</a>
<a class="carousel-control-next w-auto" href="#recipeCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<h5 class="mt-2">Advances one slide at a time</h5>
</div>
</div>
解决方法
缺少脚本，您可以在最后运行此代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="generator" content="Codeply" />
<title>Codeply simple HTML/CSS/JS preview</title>
<base target="_self" />
<link
rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
/>
<style>
@media (max-width: 768px) {
.carousel-inner .carousel-item > div {
display: none;
}
.carousel-inner .carousel-item > div:first-child {
display: block;
}
}
.carousel-inner .carousel-item.active,.carousel-inner .carousel-item-next,.carousel-inner .carousel-item-prev {
display: flex;
}
/* display 3 */
@media (min-width: 768px) {
.carousel-inner .carousel-item-right.active,.carousel-inner .carousel-item-next {
transform: translateX(33.333%);
}
.carousel-inner .carousel-item-left.active,.carousel-inner .carousel-item-prev {
transform: translateX(-33.333%);
}
}
.carousel-inner .carousel-item-right,.carousel-inner .carousel-item-left {
transform: translateX(0);
}
</style>
</head>
<body>
<div class="container text-center my-3">
<h2 class="font-weight-light">Bootstrap 4 - Multi Item Carousel</h2>
<div class="row mx-auto my-auto">
<div
id="recipeCarousel"
class="carousel slide w-100"
data-ride="carousel"
>
<div class="carousel-inner w-100" role="listbox">
<div class="carousel-item active">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=1" />
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=2" />
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=3" />
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=4" />
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=5" />
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<img class="img-fluid" src="http://placehold.it/380?text=6" />
</div>
</div>
</div>
</div>
<a
class="carousel-control-prev w-auto"
href="#recipeCarousel"
role="button"
data-slide="prev"
>
<span
class="
carousel-control-prev-icon
bg-dark
border border-dark
rounded-circle
"
aria-hidden="true"
></span>
<span class="sr-only">Previous</span>
</a>
<a
class="carousel-control-next w-auto"
href="#recipeCarousel"
role="button"
data-slide="next"
>
<span
class="
carousel-control-next-icon
bg-dark
border border-dark
rounded-circle
"
aria-hidden="true"
></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<h5 class="mt-2">Advances one slide at a time</h5>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script>
$("#recipeCarousel").carousel({
interval: 10000,});
$(".carousel .carousel-item").each(function () {
var minPerSlide = 3;
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(":first");
}
next.children(":first-child").clone().appendTo($(this));
for (var i = 0; i < minPerSlide; i++) {
next = next.next();
if (!next.length) {
next = $(this).siblings(":first");
}
next.children(":first-child").clone().appendTo($(this));
}
});
</script>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
