Slick js 使 slick slide 增长以匹配 parent 兄弟高度

Question

正在处理 slick js，我需要有关 slick slide 的帮助以匹配 parent 的兄弟姐妹高度。我想让它成长，这样它就会充满活力。

下面是我的代码：

$(".single-item").slick({
 dots: true,
  adaptiveHeight: true  
});

.container {
  display: flex;
  margin: 0 auto;
  padding: 40px;
  width: 100%;
  color: #333;
  background: #419be0;
}

.slick-slide {
  text-align: center;
  color: #419be0;
  background: white;
}

.one {
  width: 20%;
  border: 1px solid #000;
}

.single-item {
  width: 75%;
  border: 1px solid #000;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div class='container'>
  <div class="one">
    <p>
      Text Loreum ipsum Loreum ipsumLoreum ipsumLoreum ipsumLoreum ipsumLoreum ipsum Loreum ipsum Loreum ipsum Loreum ipsum Loreum ipsum Loreum ipsumLoreum ipsum Loreum ipsum Loreum ipsum Loreum ipsumLoreum ipsum Loreum ipsumLoreum ipsum
    </p>
  </div>
  <div class='single-item'>
    <div>
      <h3>Loreum ipsum Loreum ipsum Loreum ipsumLoreum ipsumLoreum ipsumLoreum ipsumLoreum ipsumLoreum ipsumLoreum ipsum</h3>
    </div>
    <div>
      <h3>2</h3>
    </div>
    <div>
      <h3>3</h3>
    </div>
    <div>
      <h3>4</h3>
    </div>
    <div>
      <h3>5</h3>
    </div>
    <div>
      <h3>6</h3>
    </div>
  </div>
</div>

我希望白色部分增长到全高以匹配 parent(.single-item) sibling(.one) 高度。并非所有幻灯片都具有相同的内容，因此它们的高度不同。

Answer 1

我想通了。

$('.offers-slick-main').on('afterChange', function(event, slick, currentSlide, nextSlide) {

  var $loginLogoutWideContainer = $('.row.hero-content'),
      $loginLogoutWideContainerHeight = $loginLogoutWideContainer.height(),
      $slideSelection = $(slick.$slides.get(currentSlide)),
      $slideSelectionHeight = $slideSelection.height();

  if ($slideSelectionHeight < $loginLogoutWideContainerHeight) {
    $slideSelection.height(($loginLogoutWideContainerHeight - 60) + 'px'); //60 is the height of the navigation buttons
    $slickOffersWrapperWide.slick('resize');
  }

});

Slick js 使 slick slide 增长以匹配 parent 兄弟高度

Slick js make the slick slide to grow to match the parent sibling height

jquery

css

slick.js