I am currently working on building a carousel to showcase testimonials, but I am facing some challenges regarding the vertical alignment of the slides.

My goal is to have the slides centered when they enter the screen, but currently they start at the top and then jump down to a centered alignment after the transition.

Here is 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");
    }
});

Here is a link to a JSFiddle that demonstrates this:

https://jsfiddle.net/yL877nhz/11/

Some of the strategies I tried but failed include:

Setting the height for the testimonial-carousel class instead of testimonial-carousel-inner.

Adding the "d-flex align-items-center" class to the carousel items instead of the container.

Attaching the "card" class to the "carousel-inner" div, which caused more issues with the transition.