Question

我正在尝试使用光滑构建全宽度图像滑块。问题是，所有图像都是1920px宽，最大宽度设置为100％。因此他们对较小的屏幕做出了响应。

以下是我实施的示例小提琴。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

我还没有在这里添加任何图片，但问题在这里显得相同。如果您是第一次装入，则右侧的滑块会略微可见。但是一旦你转到下一张幻灯片，一切都是全宽的，没有任何问题。

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

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

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

Answer 1

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

我们可以设置滑块的高度，这样当物品堆叠在另一个下面时（滑块开始之前）我们就不会滚动：

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

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

1 个答案: