Конфликт высоты слайдера с каруселью Slick Slider

Question

Я использую сликслайдер Кена Уилера и синхронизирую слайдер.Я на самом деле пытаюсь скопировать карусель slack.com, которую они используют здесь: https://slack.com/solutions/engineering

Проблема, с которой я столкнулся, заключается в том, что карусели для слайдера не нравится, когда у меня переменная высота.Это прекрасно работает, когда на всех моих слайдах одинаковая высота (например, только изображение размером 300x300), но как только я добавляю текст на слайде, который может иметь несколько высот, например две строки, три строки и т. Д., В зависимости отдлина текста будет просачиваться на другой слайд.

Видно здесь: https://jsfiddle.net/s8ta2orv/

Я пытался установить минимальную высоту на активном слайде, чтобы он учитывал дополнительный текстнезависимо от того, какой слайд, но вещи, кажется, не работают.У кого-нибудь есть совет, как решить эту проблему?

HTML

<section class="services-slider">
  <div class="nav-container">
    <div class="slider-nav">
      <div>
       <span class="slick-heading">A</span>
      </div>
      <div>
        <span class="slick-heading">B</span>
      </div>
      <div>
        <span class="slick-heading">C</span>
      </div>
      <div>
        <span class="slick-heading">D</span>
      </div>
      <div>
        <span class="slick-heading">E</span>
      </div>
      <div>
        <span class="slick-heading">F</span>
      </div>
    </div>
  </div>  


<div class="main-container">
    <div class="slider slider-main">
      <div>
        <img src="https://i.imgur.com/n2aoTvJ.png"><span class="slick-message">Expt or sdfgt cost or sdfgt cost or or sdfgt cost or sdfgt cost or sdfgt cost or sdfg o.</span>
      </div>
      <div>
        <img src="https://i.imgur.com/n2aoTvJ.png"><span class="slick-message">Expt or sdfgt  cost or sdfgt cost or sdfgt cost or sdfgt cost or sdlore your business your cost or sdfgt cost or sdfgt cost orst or sdfgt cost or sdfgt cost or sdfg o.</span>
      </div>
      <div>
        <img src="https://i.imgur.com/n2aoTvJ.png"><span class="slick-message">Expt or sdfgt cost or sdfgt cost or sdfgt cost or sdfgt cost or sdlore your business your coddst or sdfgt cost or sdfgt cost or sdfgt cost or sdfgt cost or sdfg o..</span>
      </div>
      <div>
        <img src="https://i.imgur.com/n2aoTvJ.png"><span class="slick-message"> sdfgt cost or sdfgt cost or sdfg or obligation.</span>
      </div>
      <div>
        <img src="https://i.imgur.com/n2aoTvJ.png"><span class="slick-message">Exsdfgt cost or sdfgt cost or sdfgt cost or sdfgor obligation.</span>
      </div>
      <div>
        <img src="https://i.imgur.com/n2aoTvJ.png"><span class="slick-message">Explons wit cost or sdfgthout cost or obligation.</span>
      </div>
    </div>
  </div>
</section>

JAVASCRIPT

    $(document).ready(function(){
 $('.slider-main').slick({
  slidesToShow: 1,
  arrows: false,
  asNavFor: '.slider-nav',
  vertical: true,
  autoplay: false,
  verticalSwiping: true,
  centerMode: false
});

$('.slider-nav').slick({
  slidesToShow: 6, 
  arrows:false, 
  asNavFor: '.slider-main',
  vertical: true,
  focusOnSelect: true,
  centerMode: true,
  focusOnSelect: true
});
});

CSS

.slick-slide.slick-current.slick-active { min-height: 400px!important; } 

.slick-slide img { display:inline!important;  margin: 0 auto!important; float:left!important; margin-top:80px!important; margin-left:50px!important;} 
span.slick-message { display: inline-block; color:#ffffff!important; } 

.bold-text { max-width:50px; } 

.main-container { min-width:120%; } 


.slick-slide.slick-current.slick-center:before  {
  background-color:white!important; 
  bottom: 0;
  content: '';
  display: block;
  height: 92%;
  top: 45%;
  left: 92%;
  position: absolute;
  width:32px;
  transform: skewY(-48.5deg);
  transform-origin: 84%;
  z-index: 1;
     transition: all .5s linear;
}


.slick-slide.slick-current.slick-center:after  {
  background-color:white!important; 
  bottom: 0;
  content: '';
  display: block;
  height: 92%;
  top: -45%;
  left: 92%;
  position: absolute;
  width:32px;
  transform: skewY(48.5deg);
  transform-origin: 84%;
  z-index: 1;
     transition: all .5s linear;
}



.slick-slide.slick-current.slick-center .slick-heading { color:#495863!important; } 
.slick-heading { white-space:nowrap; font-size:24px!important; font-weight:normal!important; color:#78B625!important; padding-bottom:0px!important;  } 
.slick-slide.slick-current.slick-center { background-color:#F5F8F8!important; padding-top:15px; padding-bottom:15px!important; padding-left:20px!important; margin-left: -20px!important; } 
.nav-container .slick-slide { padding-top: 24px; padding-bottom: 24px; } 

body {
  background-color: black;
}


.services-slider {
  display: flex;
  max-width: 500px;
}

slider-main {
  width: 100%;
}

.main-container {
  width: 100%;
}


.nav-container .slick-slide {
  max-height: 200px;
}

.services-slider .slick-track {
  margin-left: 50px;
}