【发布时间】：2020-09-28 17:54:44
【问题描述】：
我已经自定义了正在工作的 bootstrap4 滑块，但是当我单击 next 和 prev 按钮时突然不平滑而不平滑。我该怎么做你有什么想法解决这个问题吗？
滑块如下：-
$('.carousel-item', '.multi-item-carousel').each(function() {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
}).each(function() {
var prev = $(this).prev();
if (!prev.length) {
prev = $(this).siblings(':last');
}
prev.children(':nth-last-child(2)').clone().prependTo($(this));
});.multi-item-carousel {
overflow: hidden;
}
.multi-item-carousel .carousel-indicators {
margin-right: 25%;
margin-left: 25%;
}
.multi-item-carousel .carousel-control-prev,
.multi-item-carousel .carousel-control-next {
/* background: rgba(255, 255, 255, 0.3); */
width: 25%;
z-index: 11;
/* .carousel-caption has z-index 10 */
}
.multi-item-carousel .carousel-inner {
width: 240%;
left: -70%;
}
.multi-item-carousel .carousel-item-next:not(.carousel-item-left),
.multi-item-carousel .carousel-item-right.active {
-webkit-transform: translate3d(33%, 0, 0);
transform: translate3d(33%, 0, 0);
}
.multi-item-carousel .carousel-item-prev:not(.carousel-item-right),
.multi-item-carousel .carousel-item-left.active {
-webkit-transform: translate3d(-33%, 0, 0);
transform: translate3d(-33%, 0, 0);
}
.multi-item-carousel .item__third {
float: left;
position: relative;
width: 33.33333333%;
/* padding: 0px 10px; */
transition: all 1s;
transform: scale(1);
}
.multi-item-carousel .carousel-item .item__third:first-child img,
.multi-item-carousel .carousel-item .item__third:last-child img {
transform: scale(0.9);
transition: all 1s;
}
.multi-item-carousel .carousel-item .item__third:first-child img {
margin-left: 40px;
}
.multi-item-carousel .carousel-item .item__third:last-child img {
margin-left: -40px;
}
.multi-item-carousel .controls img {
width: 50px;
}
.multi-item-carousel .controls .carousel-control-prev,
.multi-item-carousel .controls .carousel-control-next {
opacity: 1 !important;
}
.multi-item-carousel .controls .carousel-control-prev img {
margin-left: -150px;
}
.multi-item-carousel .controls .carousel-control-next img {
margin-right: -150px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.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.0/js/bootstrap.min.js"></script>
<div id="demo" class="carousel slide multi-item-carousel mt-5" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="item__third">
<img src="https://i.stack.imgur.com/q0Kk7.png" alt="" class="d-block w-100">
</div>
</div>
<div class="carousel-item">
<div class="item__third">
<img src="https://i.stack.imgur.com/QzFbS.png" alt="" class="d-block w-100">
</div>
</div>
<div class="carousel-item">
<div class="item__third">
<img src="https://i.stack.imgur.com/8R8r3.png" alt="" class="d-block w-100">
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>我们将不胜感激，谢谢！
【问题讨论】：
-
对我来说，它在最新的稳定版本 FF、Chrome 和 Opera（都在 PC 上）中可以流畅地滑动，除了 z-index 和缩放有点弹出。您看到的是什么，您希望看到什么，哪些浏览器不适合您？
-
@indextwo 当您单击下一个和上一个按钮时，这无法正常工作，突然出现图像缩放，如果您看到正确，那么您可以找到它。为什么突然文字变大应该是平滑的。就像我们一次有三个滑块一样，中心（活动）滑块比左侧和右侧滑块大，当您单击下一步并预览时，它应该是平滑的。
-
你关心平滑度，你检查过
prefers-reduced-motionCSS吗？以防万一。 -
实际上我尝试了过渡，但这也不起作用，你有没有看到 Gaana App 滑块我想要改变歌曲时的平滑度。
-
@RohitVerma 我认为您不想使用 Bootstrap Carousel。最好使用自己制作的轮播，因为您的要求与 Boostrap Carousel 所能提供的完全不同。
标签： javascript html jquery css bootstrap-4