我正在创建一个旋转木马来举行推荐书，但我对幻灯片的垂直对齐有一些问题。
理想情况下，幻灯片将以进入屏幕为中心，但目前幻灯片将在顶部进入，然后一旦过渡结束，它就会向下跳转到居中对齐。
守则：
HTML：
<div id="Testimonials" class="text-center bg-dark py-3">
<div class="container">
<div id="testimonial_carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner testimonial-carousel-inner d-flex align-items-center" role="listbox">
<div class="carousel-item testimonial-carousel active">
<div class="card">
<div class="card-body"><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies felis sed lectus porta, vitae vulputate turpis viverra. Suspendisse consectetur augue nulla, quis tincidunt nisi condimentum vitae. Cras congue tincidunt massa vel mattis. Quisque congue elit et mattis auctor. Nam dignissim dictum lacus id lacinia. Ut non accumsan nisi. Pellentesque.</div>
<div class="card-body"><small>Anonymous</small></div>
</div>
</div>
<div class="carousel-item testimonial-carousel">
<div class="card">
<div class="card-body"><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dui leo, interdum eu faucibus nec, ornare volutpat risus. Vestibulum sem nisl, imperdiet sed rutrum et, semper eu justo. Proin porttitor nisl turpis, imperdiet condimentum urna.</div>
<div class="card-body"><small>Anonymous</small></div>
</div>
</div>
<div class="carousel-item testimonial-carousel">
<div class="card">
<div class="card-body"><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vestibulum gravida libero, eu elementum neque elementum sit amet. Sed ornare lectus non est luctus placerat. Donec et tristique purus. Ut vel ultrices quam. Sed aliquet, lacus sit amet vulputate imperdiet, augue ipsum gravida erat, eget rutrum ante dolor nec tellus. Praesent mattis, urna vel facilisis ullamcorper, velit arcu ultrices eros, et pellentesque nibh mi sit amet leo. Morbi porta metus vel sapien vulputate, quis congue massa tristique. Donec suscipit quis.</div>
<div class="card-body"><small>Anonymous</small></div>
</div>
</div>
</div>
<a class="carousel-control-prev-hidden" href="#testimonial_carousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next-hidden" href="#testimonial_carousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
CSS
.testimonial-carousel-inner {
height:auto;
}
.carousel-control-next-hidden,.carousel-control-prev-hidden{
position:absolute;
top:43.75%;
height:50px;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
width:50px;
color:#fff;
background-color: rgba(111,111,111,0.2);
text-align:center;
opacity:.9
}
.carousel-control-next-hidden:hover,.carousel-control-prev-hidden:hover{
color:#fff;
background-color: rgba(0, 115, 255, 0.5);
text-decoration:none;
outline:0;
opacity:0.9;
}
.carousel-control-prev-hidden {
left:3%
}
.carousel-control-next-hidden {
right:3%
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}
的Javascript
$(document).ready(function() {
$(window).resize(function() {
standardiseHeight("testimonial-carousel");
});
standardiseHeight("testimonial-carousel");
function standardiseHeight(divName) {
// Sets a var to hold the height of the tallest slide
$maxHeight = 0;
// Resets previous height setting.
$("."+divName+"-inner").css("height","auto");
// Iterates through all slides
$("."+divName).each(function(i, obj) {
$thisHeight = $(this).outerHeight();
//Compares height with the max number, sets max to the highest of the two
if ($thisHeight > $maxHeight){
$maxHeight = $thisHeight;
}
});
// Sets the height of the container to the tallest slide
$("."+divName+"-inner").css("height",$maxHeight+"px");
}
});
和一个提供示例的jsfiddle
https://jsfiddle.net/yL877nhz/11/
尝试解决此问题的失败包括：
设置见证 - 轮播类的高度，而不是testimonial-carousel-inner。
将“d-flex align-items-center”类设置为轮播项而不是容器
将“卡片”类附加到“carousel-inner”div，这更加扼杀了转换。
答案 0 :(得分：0)
我所做的就是设置一个标志，禁止重新计算功能在任何给定时间运行多次。我在窗口load和resize事件上运行它。而且我让所有幻灯片都有相同的高度。
let parsing = false,
tCar = $('#testimonial_carousel'),
reCalc = function() {
if (!parsing) {
parsing = true;
$('.card').height('auto');
setTimeout(() => {
let height = 0;
$('.carousel-item', tCar).each(function() {
height = Math.max(height, $(this).height())
})
$('.card',tCar).each(function() {
$(this).height(height);
})
tCar.height(height);
parsing = false;
})
}
}
$(window).on('load resize', reCalc);.testimonial-carousel-inner {
height: auto;
}
.card {
justify-content: space-around;
}
div.card-body {
flex-grow: 0;
}
.card small{
padding: 15px;
}
#testimonial_carousel {
transition: height .3s cubic-bezier(.4,0,.2,1);
}
.carousel-control-next-hidden,
.carousel-control-prev-hidden {
position: absolute;
top: calc(50% - 25px);
height: 50px;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
color: #fff;
background-color: rgba(111, 111, 111, 0.2);
text-align: center;
opacity: .9
}
.carousel-control-next-hidden:hover,
.carousel-control-prev-hidden:hover {
color: #fff;
background-color: rgba(0, 115, 255, 0.5);
text-decoration: none;
outline: 0;
opacity: 0.9;
}
.carousel-control-prev-hidden {
left: 3%
}
.carousel-control-next-hidden {
right: 3%
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>
<main>
<div id="Testimonials" class="text-center bg-dark py-3">
<div class="container">
<div id="testimonial_carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner testimonial-carousel-inner d-flex align-items-center" role="listbox">
<div class="carousel-item testimonial-carousel active">
<div class="card">
<div class="card-body"><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies felis sed lectus porta, vitae vulputate turpis viverra. Suspendisse consectetur augue nulla, quis tincidunt nisi condimentum vitae.
Cras congue tincidunt massa vel mattis. Quisque congue elit et mattis auctor. Nam dignissim dictum lacus id lacinia. Ut non accumsan nisi. Pellentesque.</div>
<small>Anonymous</small>
</div>
</div>
<div class="carousel-item testimonial-carousel">
<div class="card">
<div class="card-body"><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dui leo, interdum eu faucibus nec, ornare volutpat risus. Vestibulum sem nisl, imperdiet sed rutrum et, semper eu justo. Proin porttitor nisl
turpis, imperdiet condimentum urna.</div>
<small>Anonymous</small>
</div>
</div>
<div class="carousel-item testimonial-carousel">
<div class="card">
<div class="card-body"><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vestibulum gravida libero, eu elementum neque elementum sit amet. Sed ornare lectus non est luctus placerat. Donec et tristique purus. Ut
vel ultrices quam. Sed aliquet, lacus sit amet vulputate imperdiet, augue ipsum gravida erat, eget rutrum ante dolor nec tellus. Praesent mattis, urna vel facilisis ullamcorper, velit arcu ultrices eros, et pellentesque nibh mi sit amet
leo. Morbi porta metus vel sapien vulputate, quis congue massa tristique. Donec suscipit quis.</div>
<small>Anonymous</small>
</div>
</div>
</div>
<a class="carousel-control-prev-hidden" href="#testimonial_carousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next-hidden" href="#testimonial_carousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
</main>
如果您想要的话，可以随时将justify-content .card更改为space-between或center。别忘了prefix。
如果您对所有具有相同高度的幻灯片感到不满意，并且您希望旋转木马的高度从幻灯片滑动到滑动，我会说它太复杂了要求被提出要求对于SO，使用Bootstrap v4的轮播组件。您应该雇用某人为您编码，或者寻找一个提供开箱即用功能的旋转木马（即：光滑）。
参考：＆＃34;我正在为我正在努力举办推荐书的公司创建一个轮播＆＃34; ，它大致转化为：＆＃34;我有一份工作，我没有资格，所以请你好好工作，这样我才能得到报酬。＆＃34;
你最好不提这个。如果您希望别人帮助您，请确保您尽可能地做到：