Slick Slider Has Empty Slide

Question

I've got a simple Slick slider with 4 items. It is set to center mode and automatic. When it first loads the first slide has nothing to the left of it. Whenever the final (fourth) slide comes in, the slide to the right (first)s blank until it slides in.

I did see this question but the answer was complete greek to me. Here's my HTML and JS.

<div class="your-class">
  <div id="mySlide1">one</div>
  <div id="mySlide2">two</div>
  <div id="mySlide3">three</div>
  <div id="mySlide4">four</div>
</div>

Javascript

$('.your-class').slick({
    autoplay: true,
    centerMode:true,
    centerPadding:'60px'
    });

Why are the first and last slides blank/empty?

https://jsfiddle.net/s1f4yo76/2/

Answer 1

Okay with some fiddling I figured it out. The styles in my stylesheets are overwritten by the Slick engine for some reason, but only for the first and last slides. To fix this I just put my divs and inline styles directly into the javascript via "SlickAdd" as you can see in my jsfiddle.

<div id="theContainer">
</div>

Javascript

var theContainer = $('#theContainer');

theContainer.slick({
    autoplay: true,
    centerMode:true,
    centerPadding:'60px',
    dots:true
    });

var theDiv = $('<div class="theSlide"><div style="background-color:orange;height:120px;">one</div></div>');
theContainer.slick('slickAdd', theDiv);

var theDiv = $('<div class="theSlide"><div style="background-color:green;height:120px;">two</div></div>');
theContainer.slick('slickAdd', theDiv);

var theDiv = $('<div class="theSlide"><div style="background-color:blue;height:120px;">three</div></div>');
theContainer.slick('slickAdd', theDiv);

https://jsfiddle.net/thinkcl/urspf8pg/2/

Answer 2

It looks like Slick Slider clones only the class attribute. Its only at the end of the swipe action that the slide is entirely cloned with ID. I would suggest tu use a Classname instead of ID to target the slide.