javascript - 光滑的旋转木马第二张幻灯片可见

Question

我正在尝试使用 slick 构建全宽图像 slider 。 问题是，所有图像都是 1920 像素宽，并且它们的最大宽度设置为 100%。因此它们对较小的屏幕响应迅速。

下面是我实现的示例 fiddle 。

https://jsfiddle.net/wjjLyq3s/4/

$(document).ready(function() {
  $(".single-item").slick({
    dots: false,
    arrows: false
  });
});

.container {
  margin: 0;
  padding: 0px;
  width: 100%;
  background: #419be0;
}

.slick-slide {
  text-align: center;
  color: #419be0;
  background: white;
}

h3.red {
  width: 1920px;
  height: 300px;
  background-color: red;
  color: #fff;
}

h3.green {
  width: 1920px;
  height: 300px;
  background-color: green;
  color: #fff;
}

h3.blue {
  width: 1920px;
  height: 300px;
  background-color: blue;
  color: #fff;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>

<div class='container'>
  <div class='single-item'>
    <div>
      <h3 class="red">1</h3>
    </div>
    <div>
      <h3 class="green">2</h3>
    </div>
    <div>
      <h3 class="blue">3</h3>
    </div>
  </div>
</div>

我没有在此处添加任何图片，但问题在此处出现相同。如果您是第一次加载，右侧的幻灯片会略微可见。但是一旦您移至下一张幻灯片，一切都是全宽的，没有任何问题。

因此需要进行修复，以便右侧的幻灯片在第一次加载时不可见。

请注意，我在 fiddle 中使用了宽度为 1920px 的 div，但在我的真实 slider 代码中，我没有为图像分配任何宽度，因为它们已经是 1920px，并且我已将它们的最大宽度设置为 100%响应式工作。

请使用 jsfiddle 链接进行测试，因为此处集成的代码不会显示此问题。

Answer 1

我假设这是由于窗口滚动而发生的。

我们可以为 slider 设置一个高度，这样当元素一个接一个地堆叠时(在 slider 开始之前)我们就不会滚动:

.slick-slider {
  max-height: 300px;
  overflow: hidden;
}