轮播切换时内容先从下方进入再上移，如何修复为仅左右平滑滑动

问题根因 #

当前轮播容器采用纵向flex布局，轮播项为常规文档流排列，切换过程中会同时存在2个可见轮播项，两个元素上下堆叠导致新内容先出现在容器底部，再平移进入可视区。

修复方案 #

1. 调整HTML结构 #

将所有轮播项包裹到独立的滑动容器中，和控制区域分离：

<div class="container">
  <div class="testimonial">
    <div class="testimonial__slider">
      <div class="testimonial__controls">
        <h3>Lorem ipsum dolor sit amet.</h3>
        <div class="arrows">
          <span class="testimonial__slider-control-prev" role="button">
            <img aria-hidden="true" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Feather-arrows-arrow-left.svg/768px-Feather-arrows-arrow-left.svg.png" height="25" width="25" alt="Previous Slide Button">
          </span>
          <span class="testimonial__slider-control-next" role="button">
            <img aria-hidden="true" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Feather-arrows-arrow-right.svg/1200px-Feather-arrows-arrow-right.svg.png" height="25" width="25" alt="Next Slide Button">
          </span>
        </div>
      </div>
      <!-- 新增滑动容器包裹所有轮播项 -->
      <div class="testimonial__slider-wrap">
        <div class="testimonial__item active">
          <div class="testimonial__img">
            <img class="img-fluid" src="https://nextivaweb.imgix.net/heroes/case-study/Case-Study-Conan-hero.jpg?w=336&h=412&auto=format&crop=focalpoint&fit=crop&fp-x=.75&fp-z=1.3&fp-y=.39" alt="">
          </div>
          <div class="testimonial__content">
            <div class="testimonial__text">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti laboriosam fugiat perferendis blanditiis, dignissimos temporibus sunt aliquam sequi quia! Deleniti earum quibusdam dolorem accusantium ipsum?</p>
            </div>
            <div class="testimonial__credits">
              <span class="testimonial__name kicker kicker--bold">Lorem, ipsum.</span>
              <span class="testimonial__position kicker kicker--light">Lorem ipsum dolor sit amet,
                Burbank,
                CA</span>
            </div>
          </div>
        </div>
        <div class="testimonial__item">
          <div class="testimonial__img">
            <img class="img-fluid" src="https://sandbox-uploads.imgix.net/u/1630477471-dd0cd5b16967417586c822d6dabcb995?w=336&h=412&auto=format" alt="">
          </div>
          <div class="testimonial__content">
            <div class="testimonial__text">
              <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto veniam eos, omnis commodi doloribus dignissimos at ad quia asperiores nulla.</p>
            </div>
            <div class="testimonial__credits">
              <span class="testimonial__name kicker kicker--bold">Lorem, ipsum.</span>
              <span class="testimonial__position kicker kicker--light">Lorem ipsum dolor sit amet.</span>
            </div>
          </div>
        </div>
        <div class="testimonial__item">
          <div class="testimonial__img">
            <img class="img-fluid" src="https://sandbox-uploads.imgix.net/u/1630477587-e54d61f4eef5e36c72dccd1fc0463514?w=336&h=412&auto=format" alt="">
          </div>
          <div class="testimonial__content">
            <div class="testimonial__text">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit nesciunt aliquam cum commodi perferendis, iusto numquam eum neque nulla natus adipisci facere officiis.</p>
            </div>
            <div class="testimonial__credits">
              <span class="testimonial__name kicker kicker--bold">Lorem, ipsum.</span>
              <span class="testimonial__position kicker kicker--light">Lorem ipsum dolor sit amet,
                Burbank,
                CA</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

2. 修改CSS样式 #

新增滑动容器样式，调整轮播项布局规则，让所有轮播项在同一层级叠加：

/* 新增滑动容器样式 */
.testimonial__slider-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* 可根据实际轮播内容高度调整固定值，或用JS动态计算最高轮播项高度赋值实现自适应 */
  min-height: 420px;
}
/* 修改轮播项基础样式 */
.testimonial__slider .testimonial__item {
  height: 100%;
  width: 100%;
  display: none;
  /* 动画时长和JS的400ms切换延迟保持一致，更顺滑 */
  transition: transform 0.4s ease;
  /* 脱离文档流，所有轮播项在同一位置叠加 */
  position: absolute;
  top: 0;
  left: 0;
}

3. 可选自适应高度优化 #

如果需要轮播高度自适应不同内容高度，可在JS的Slider构造函数末尾添加以下代码，自动计算最高轮播项高度赋值给滑动容器：

// 构造函数末尾添加
const maxHeight = Array.from(this.sliderItems).reduce((max, item) => Math.max(max, item.offsetHeight), 0);
this.slider.querySelector('.testimonial__slider-wrap').style.height = `${maxHeight}px`;

修改完成后轮播项只会沿水平方向平移，不会出现上下错位的问题。

内容的提问来源于stack exchange，提问作者Millhorn