响应式图像（Slick Slider + SlideToggle）

Question

我有一个光滑的滑块，里面装满了响应式背景图片，我想用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

这是你固定的小提琴：https://jsfiddle.net/9zhd87yv/1/

我必须从.arbtbox移除填充，进行一些调整并将position:relative添加到.addressBox。

.addressBox {
   position: relative;
}

我改变了一些东西。不记得所有。我只是想让它看起来更好。随意看看差异并排。