I'm creating a carousel to hold testimonials, but i'm having a few issues with the vertical alignment of the slides.
Ideally, the Slides will be centered upon entering the screen, but currently the slide will come in at the top, and then once the transition is over it jumps down to a centered alignment.
The Code:
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");
}
});
and a jsfiddle to provide an example
https://jsfiddle.net/yL877nhz/11/
Some failed attempts to fix this include:
Setting the height for the testimonial-carousel class instead of testimonial-carousel-inner.
Setting the "d-flex align-items-center" class to the carousel items instead of the container for them
Attaching the "card" class to the "carousel-inner" div, which screwed with the transition even more.
