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

Question

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

下面是我实现的示例小提琴。

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>

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

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

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

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

Answer 1

我认为这是由于窗口滚动而发生的。

我们可以为滑块设置一个高度，这样当项目堆叠在一起时（在滑块开始之前）我们不会滚动：

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