Slick carousel 2nd slide visible

Question

I am trying to build a full width image slider using slick. The thing is, all the images are 1920px wide and they have max-width set to 100%. So they are responsive for smaller screen.

Below is the sample fiddle I have implemented.

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>

I haven't added any image here but the issue is appearing same here. If you load for the first time, the slide on the right side is visible slightly. But once you move to next slide, everything is full width without any issues.

So the fix is needed so the slide on right side is not visible at the first load.

Please note that I have used the divs with 1920px width here in fiddle but in my real slider code, I am not assigning any width to the images as those are alreaday 1920px and I have made their max-width to 100% to work responsively.

Please use jsfiddle link to test this as the code integrated here will not show this issue.

Answer 1

I assume that this is happening because of the window scroll.

We can set a height to the slider, so that there us no scroll when the items are stacked one under another ( before the slider starts ):

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