响应图像（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

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

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

.addressBox {
   position: relative;
}

我在里面又改了一些东西。都不记得了。我只是想让它看起来更好。请随意并排查看差异。

响应图像（Slick Slider + SlideToggle）

Responsive images (Slick Slider + SlideToggle)

css

jquery

slidetoggle

responsive