如何在 Slick slideshow 中调整幻灯片的高度相等？

Question

请看一下 here - 更具体地说是紫色背景中的推荐滑块。我正在使用 Slick 滑块来显示缩略图。一切似乎都很好，但是推荐有不同长度的文本，这会影响容器的高度。

我希望容器始终保持相同的高度，这意味着它应该是最高评价的高度。

这是我使用的代码：

  $(".quotes").slick({
    arrows: false,
    infinite: true,
    autoplay: true,
    autoplaySpeed: 2000,
    speed: 1200,
    slidesToShow: 1,
    adaptiveHeight: false,
  });

    .home-quote {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 450px;
      position: relative;
      padding: 80px 12%;
      .quote-block {
        font: Italic 40px/60px "Libre Baskerville";
        color: $bluedark;
        position: relative;
        .quote-text {
          &::before {
            content: "„";
            position: absolute;
            top: -116px;
            left: -100px;
            font: Bold 150px/65px "Libre Baskerville";
            color: $violet;
          }
          &::after {
            content: "„";
            position: absolute;
            right: -100px;
            font: Bold 150px/65px "Libre Baskerville";
            color: $violet;
          }
        }
    
        footer {
          position: relative;
          margin-top: 60px;
          cite {
            position: absolute;
            right: 0;
          }
        }
      }
    }

这是一个示例证明 HTML:

       <section  class="testimonials">
            <div role="complementary" class="carousel simple quotes no-fouc">
            <blockquote>
            <cite>M.</cite>
                <p>Short text</p>
            </blockquote>
            <blockquote>
            <cite>A.</cite>
                <p>Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text A.</p>
            </blockquote>
            <blockquote>
            <cite>M.</cite>
             <p>Short text</p>
            </blockquote>
    
            </div>
        </section>

任何人都可以帮忙删除那些 div 的大小调整吗？

Answer 1

添加这个：

.simple cite {
  margin: 0 auto;
}
  .slick-track {
    display:flex;
  }

.carousel {
    height:inherit;
  }

那应该没问题。

如何在 Slick slideshow 中调整幻灯片的高度相等？

How to adjust the height of slides in Slick slideshow to be equal?

css

slick.js