我有一个显示3 items at a time和advances by one的转盘。
当我单击下一个按钮时，项目发生了变化，但第二个和第三个项目似乎消失了，第一个项目向左播放动画，然后它们出现了(这不平滑，我希望它们都播放动画/翻译(。同样，当第六项(第六张牌(在最左边时，中间有牌7，但在最右边没有牌(应该是牌1(，类似于当最左边的牌是7时，有2个间隙。
我是引导程序的新手，但我需要为school做这件事。我很确定我丢失了一些CSS，我从https://codepen.io/mandelakibiriti/pen/xQXyKQ但是仅仅粘贴所有内容都不起作用，所以我对CSS做了一些更改。
$(document).ready(function() {
$("#myCarousel").on("slide.bs.carousel", function(e) {
var $e = $(e.relatedTarget);
var idx = $e.index();
var itemsPerSlide = 3;
var totalItems = $(".carousel-item").length;
if (idx >= totalItems - (itemsPerSlide - 1)) {
var it = itemsPerSlide - (totalItems - idx);
for (var i = 0; i < it; i++) {
// append slides to end
if (e.direction == "left") {
$(".carousel-item")
.eq(i)
.appendTo(".carousel-inner");
} else {
$(".carousel-item")
.eq(0)
.appendTo($(this).find(".carousel-inner"));
}
}
}
});
});.carousel-inner .active,
.carousel-inner .active+.carousel-item,
.carousel-inner .active+.carousel-item+.carousel-item {
display: block;
}
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item,
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left)+.carousel-item+.carousel-item {
transition: none;
margin-right: initial;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container-fluid">
<h1 class="text-center mb-3">Bootstrap Multi-Card Carousel</h1>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner row w-100 mx-auto">
<div class="carousel-item col-md-4 active">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/800x600/f44242/fff" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card 1</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="carousel-item col-md-4">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/800x600/418cf4/fff" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card 2</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="carousel-item col-md-4">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/800x600/3ed846/fff" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card 3</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="carousel-item col-md-4">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/800x600/42ebf4/fff" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card 4</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="carousel-item col-md-4">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/800x600/f49b41/fff" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card 5</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="carousel-item col-md-4">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/800x600/f4f141/fff" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card 6</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="carousel-item col-md-4">
<div class="card">
<img class="card-img-top img-fluid" src="http://placehold.it/800x600/8e41f4/fff" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card 7</h4>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" 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.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>这个转盘有很多CSS问题，请使用@Zim(@codeply-er(解决方案https://stackoverflow.com/a/20008623/8798220
如果你在幻灯片上发现了一个小故障，你可以使用如何在旋转木马滑块中添加图像之间的间隙，或者在幻灯片概念(我自己的问题(时删除小故障
$('.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));
}
});<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<style>
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(100%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-100%);
}
@media (min-width: 768px) {
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(33.33%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-33.33%);
}
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{
transform: translateX(0);
}
</style>
<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">
<img class="img-fluid col-12 col-md-4" src="http://placehold.it/380?text=1">
</div>
<div class="carousel-item">
<img class="img-fluid col-12 col-md-4" src="http://placehold.it/380?text=2">
</div>
<div class="carousel-item">
<img class="img-fluid col-12 col-md-4" src="http://placehold.it/380?text=3">
</div>
<div class="carousel-item">
<img class="img-fluid col-12 col-md-4" src="http://placehold.it/380?text=4">
</div>
<div class="carousel-item">
<img class="img-fluid col-12 col-md-4" src="http://placehold.it/380?text=5">
</div>
<div class="carousel-item">
<img class="img-fluid col-12 col-md-4" src="http://placehold.it/380?text=6">
</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://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>卡片
$('.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));
}
});<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<style>
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(100%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-100%);
}
@media (min-width: 768px) {
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(33.33%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-33.33%);
}
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{
transform: translateX(0);
}
</style>
<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="card col-12 col-md-4" style="width: 18rem; border-width: 0;">
<img src="http://placehold.it/380?text=1" class="card-img-top" alt="image">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card col-12 col-md-4" style="width: 18rem; border-width: 0;">
<img src="http://placehold.it/380?text=2" class="card-img-top" alt="image">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card col-12 col-md-4" style="width: 18rem; border-width: 0;">
<img src="http://placehold.it/380?text=3" class="card-img-top" alt="image">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card col-12 col-md-4" style="width: 18rem; border-width: 0;">
<img src="http://placehold.it/380?text=4" class="card-img-top" alt="image">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card col-12 col-md-4" style="width: 18rem; border-width: 0;">
<img src="http://placehold.it/380?text=5" class="card-img-top" alt="image">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card col-12 col-md-4" style="width: 18rem; border-width: 0;">
<img src="http://placehold.it/380?text=6" class="card-img-top" alt="image">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</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://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>