0

Хоть и в настройках есть 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();
});

2 ответа 2

2

Вариант убрать 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/[email protected]/slick/slick.min.js"></script>
<link href="//cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/slick/slick.min.js"></script>
<link href="//cdn.jsdelivr.net/npm/[email protected]/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>

1

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

5
  • @stiv, a слайды по высоте можно выровнять флексбоксом, если нужно.
    – zhurof
    13 дек 2018 в 8:44
  • Тут уже появляется другая проблема. Если adaptiveHeight false или убрать, то будет появляться пустое пространство на текущем слайде (если на предыдущем нажали на кнопку "показать") prnt.sc/lud46z
    – stiv
    13 дек 2018 в 8:54
  • @stiv, для выравнивания высоты слайдов придётся использовать другие приёмы 13 дек 2018 в 8:55
  • Это очевидно. А какие?
    – stiv
    13 дек 2018 в 9:05
  • @stiv, так HamSter выше дал ответ: там второй вариант - это же то, что Вам надо? 13 дек 2018 в 9:16

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.