Although the settings are adaptiveHeight, but does not work with hidden content. When clicked, it is simply not displayed, but after returning from another slide, it becomes visible. Perhaps somehow through the cycle you will have to read the height beforehand, taking into account the hidden block. I ask for help with advice

https://codepen.io/st-iv/pen/qLOKWj

$('.slider').slick({ infinite: true, slidesToShow: 1, slidesToScroll: 1, adaptiveHeight: true }); // accordion $('.content-hide').hide(); $('.show-btn').click(function (e) { e.preventDefault(); $(this).siblings('.content-hide').slideToggle(); });

    2 answers 2

    Option to remove adaptiveHeight: true while maintaining the overall height of the slider:

     $('.slider').slick({ infinite: true, slidesToShow: 1, slidesToScroll: 1, //adaptiveHeight: true, }); $('.content-hide').slideUp(); $('.show-btn').click(function (e) { e.preventDefault(); var $this = $(this), wrap = $this.closest('.slide'), content = wrap.find('.content-hide'), $slider = $('.slider'); content.slideToggle(); }); 
     *{ box-sizing:border-box; } body{ background-color:#cda; } .container { max-width: 960px; margin: auto; } .slide{ /* height:100px; */ background-color:gray; color:#fff; line-height:100px; text-align:center; font-weight:bold; font-size:25px; } .slick-arrow{ display:inline-block; width:40px; height:40px; cursor:pointer; } .slick-arrow circle{ fill:#fff; stroke:green; stroke-width:2; stroke-dasharray:0,1000px; transition: all .2s linear; } .slick-arrow path{ stroke-width:2; fill:none; stroke:black; stroke-linecap:round; } .show-btn { color: #000; } .slick-slide { height: auto !important; } .slider { border:1px solid red; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" /> <div class="container"> <div class="slider"> <div class="slide"> <span>1</span> <div class="content-hide"> Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. </div> <div class="show-btn"> show/hide content </div> </div> <div class="slide"> <span>2</span> <div class="content-hide"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, voluptatum. </div> <div class="show-btn"> show/hide content </div> </div> <div class="slide">3</div> <div class="slide">4</div> <div class="slide">5</div> </div> </div>

    Or this option without saving the total height $slider.find('.slick-slide').height('auto'); $slider.find('.slick-list').height('auto'); $slider.slick('setOption', null, null, true); $slider.find('.slick-slide').height('auto'); $slider.find('.slick-list').height('auto'); $slider.slick('setOption', null, null, true); :

     $('.slider').slick({ infinite: true, slidesToShow: 1, slidesToScroll: 1, adaptiveHeight: true, }); // accordion $('.content-hide').slideUp(); $('.show-btn').click(function (e) { e.preventDefault(); var $this = $(this), wrap = $this.closest('.slide'), content = wrap.find('.content-hide'), $slider = $('.slider'); content.slideToggle(); $slider.find('.slick-slide').height('auto'); $slider.find('.slick-list').height('auto'); $slider.slick('setOption', null, null, true); }); 
     *{ box-sizing:border-box; } body{ background-color:#cda; } .container { max-width: 960px; margin: auto; } .slide{ /* height:100px; */ background-color:gray; color:#fff; line-height:100px; text-align:center; font-weight:bold; font-size:25px; } .slick-arrow{ display:inline-block; width:40px; height:40px; cursor:pointer; } .slick-arrow circle{ fill:#fff; stroke:green; stroke-width:2; stroke-dasharray:0,1000px; transition: all .2s linear; } .slick-arrow path{ stroke-width:2; fill:none; stroke:black; stroke-linecap:round; } .show-btn { color: #000; } .slick-slide { height: auto !important; } .slider { border:1px solid red; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" /> <div class="container"> <div class="slider"> <div class="slide"> <span>1</span> <div class="content-hide"> Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. </div> <div class="show-btn"> show/hide content </div> </div> <div class="slide"> <span>2</span> <div class="content-hide"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, voluptatum. </div> <div class="show-btn"> show/hide content </div> </div> <div class="slide">3</div> <div class="slide">4</div> <div class="slide">5</div> </div> </div>

      Well, because adaptiveHeight just should not be (or the parameter should be false) - then everything will work as intended.

      • @stiv, a slides in height can be aligned with flexbox, if necessary. - zhurof
      • There is already another problem. If adaptiveHeight is false or removed, empty space will appear on the current slide (if you clicked the show button in the previous one) prnt.sc/lud46z - stiv
      • @stiv, for leveling the height of the slides you will have to use other techniques - humster_spb
      • It is obvious. And which ones? - stiv
      • @stiv, so HamSter above answered: is there a second option - is that what you want? - humster_spb