Initializing slider removes slides from DOM

When initializing Slick Slider v1.8.0 or v1.8.1, the Slides are removed from DOM and an empty slider is generated. When using v1.7.1, the Slides are appearing as they should.

Slider HTML (pre-init):

<div class="promoslider">

    <div class="prod">
        <a href="#">
            <div class="imgContainer">
                <img class="thumb" src="#">
            </div>
            <h5>Lorem Ipsum</h5>
            <div class="priceContainer">
                Dolor sic Amet
            </div>
        </a>
    </div>

    <!-- Repeat div class="prod" to duplicate the slides -->
</div>

Slider settings and Init Call

<script>
        var sliderSettings= {
            speed : 300,
            slidesToShow : 1,
            slidesToScroll : 1,
            mobileFirst : true,
            arrows : false, // For now
            autoplay : true,
            autoplaySpeed : 2000,
            swipeToSlide: true,
            responsive : [{
                    breakpoint : 992,
                    settings: 'unslick'
            }, {
                    breakpoint : 767,
                    settings : {
                            slidesToShow : 2                        
                    }
            }, {
                    breakpoint : 767,
                    settings : {
                            slidesToShow : 2                        
                    }
            }, {
                    breakpoint : 468,
                    settings: {
                            slidesToShow : 1
                    }
            }]
        };
        $('.promoslider').slick(sliderSettings);
    </script>

Post-init Slider HTML

<div class="promoslider slick-initialized slick-slider">
    <div class="slick-list draggable">
        <div class="slick-track" style="opacity: 1; width: 0px; transform: translate3d(0px, 0px, 0px);">
        </div>
    </div>
</div>

Does anyone have an idea why Slick removes the slides from the DOM in the latest update?

Used libraries:

• Slick-carousel 1.8.1
• jQuery 3.3.1

[tbd-rsm]

This may be related to commit be0d17cc858fb30e6a4d6b28cc29860c7170040d, which seems to have changed the default behaviour of row wrappers.

The old default was to have one row without additional wrappers. The new one is to add wrappers even when only one row is needed. That change made some other code in my project break, which relied on the given element structure.

Setting the slick option rows to 0 worked as a fix for that issue. (as seen in a comment to the mentioned commit)

[sinan-evanshunt]

Using "slick-carousel": "~1.6" and David’s solution fixed it for me. Thanks.