Использую слайдер Slick с настройкой adaptiveHeight: true . Проблема в том, что если в одном из слайдом добавлять динамически текст, то адаптивность начинает работать не корректно. Если нажать на первом слайде на кнопку show, то контент слайд не сжимается до размеров текста? Как решить эту проблему?
https://codepen.io/anon/pen/eWWEva
$( document ).ready(function() {
$(".slickNormalAdaptive").slick({
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
adaptiveHeight: true
});
$(".showItem").click(function(){
$(this).prev("ul").find("li:nth-child(n+5)").toggleClass('hidden');
})
});
.green {
background-color: green;
}
.red {
background-color: red;
}
body {
background: #ccc;
}
.hidden {
display: none;
}
.slick-track {
background-color: #484848;
color: #f1f1f1;
}
<link href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick-theme.css" rel="stylesheet"/>
<link href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class="slickNormalAdaptive">
<div class="box100 green">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
<button class="showItem">Show</button>
</div>
<div class="box200 red">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
<button class="showItem">Show</button>
</div>
</div>