jquery - 响应图像(Slick Slider + SlideToggle)

Question

我有一个光滑的 slider ，里面装满了响应式背景图片，我想使用 slideToggle 顺畅地工作。

如何在不向 .slider 添加高度的情况下使第一次点击变得平滑

HTML

<button type="button" class="show-slider">Show Slider</button>

<div class="slider">
  <div class="addressBox"> <!-- Slide -->
    <div class="pbottom"></div>
    <div class="artwork" style="background-image: url('https://image.tmdb.org/t/p/w640/u7ZpBy8eR50ixjumnkQnCUEbpRa.jpg');"></div>
  </div>
  <div class="addressBox"> <!-- Slide -->
    <div class="pbottom"></div>
    <div class="artwork" style="background-image: url('https://image.tmdb.org/t/p/w640/u7ZpBy8eR50ixjumnkQnCUEbpRa.jpg');"></div>
  </div>
  <div class="addressBox"> <!-- Slide -->
    <div class="pbottom"></div>
    <div class="artwork" style="background-image: url('https://image.tmdb.org/t/p/w640/u7ZpBy8eR50ixjumnkQnCUEbpRa.jpg');"></div>
  </div>
</div>

JS

var $slider = $('.slider').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});

$('.show-slider').on("click", function() {
  $slider.slideToggle().get(0).slick.setPosition();
});

CSS

.slider {
  display: none;
  max-width: 400px;
  background-color: green;
  height: auto;
}

.pbottom {
  padding: 73.125% 0;
}

.artwork {
  background-size: contain;
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
}

演示: https://jsfiddle.net/9zhd87yv/

Answer 1

这是你的固定 fiddle :https://jsfiddle.net/9zhd87yv/1/

我不得不从 .arbtbox 中删除填充，做一些更多的调整并将 position:relative 添加到 .addressBox。

.addressBox {
   position: relative;
}

我在其中更改了一些内容。都不记得了。我只是想让它看起来更好。请随意并排查看差异。