Аккордеоны в slick slider

122

12 июня 2019, 10:20

Хоть и в настройках есть adaptiveHeight, но не работает со скрытым контентом. При клике он просто не отображается, но после возврата с другого слайда он становится виден. Возможно как-то через цикл придётся считать предварительно высоту, учитывая скрытый блок. Прошу помочь советом

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();
});

Answer 1

Вариант убрать adaptiveHeight: true при этом сохраняется общая высота слайдера:

$('.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>

Или такой вариант без сохранения общей высоты $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>

Answer 2

Ну, потому что adaptiveHeight как раз и не должно быть (или параметр должен быть false) - тогда всё будет работать как задумано.