如何在过渡过程中垂直将Bootstrap 4旋转木马滑动

Question

我正在创建一个旋转木马来保存证明，但是我在幻灯片的垂直对齐时遇到了一些问题。

理想情况下，幻灯片将在进入屏幕时以中心为中心，但是目前的幻灯片将在顶部进入，然后一旦过渡过渡，它就会跳到中心对齐。

代码：

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/

解决此问题的一些失败尝试包括：

设置证券 - 赛车类的高度，而不是证明律师。

将" D-FLEX Align-Items-Center"类设置为旋转木马项目，而不是用于它们的容器

将"卡"类连接到"旋转木马"div，该div的过渡更加拧紧。

Answer 1

我所做的只是设置一个标志以禁止重新计算功能在任何给定时间运行一次。我正在窗口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>

如果您想要的话，可以随意将.card的justify-content更改为space-between或center。而且不要忘记前缀。

如果您对所有幻灯片的高度都不满意，并且您希望轮播的高度从幻灯片到幻灯片，我会说，使用Bootstrap V4的旋转木马，这太复杂了。成分。您应该雇用某人为您编写编码，或者寻找开箱即用的旋转木马(即：Slick(。

---

ref："我正在为我正在为保存证明的公司创建一个旋转木马" ，它粗略地转化为："我有一份我没有资格的工作因此，请保持友善，以便我得到报酬。"
最好您根本没有提及这一点。如果您希望人们为您提供帮助，请确保您可能会尽力而为：

• 使其他人轻松帮助您
• 使您的问题有用(一般(足够有用，因此它的答案很有可能帮助其他问题的人 - 换句话说，不要提出非常本地化的问题，这只会有助于一个非常具体的情况(您(回答时。