Slick: Initializing slider removes slides from DOM

[LeonidasJP]

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

[Pal9yni4bi]

Similar problem: after second $elem.slick('unslick') content of slider removed from DOM.
slick v. 1.9.0

[Pal9yni4bi]

In my case problem was with multiple event listener binding.
Fix it by unbinding listener before repeating of bind.

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

[landwire]

Experiencing the same problem, that all slides are removed when "unslicking" the second time. Will this be fixed in the near future? Or is this intended behaviour?

[maxime-aknin]

Encountered the same problem, in my case I was manually unslicking the element on window resize, but the resize function in slick contains a timeout that triggers a refresh, and this timeout is currently not cleared when the element is unslicked. This is causing the function cleanUpRows to be called on an unslicked element, leading to slides removal from the DOM.

I created a pull request to fix this issue: https://github.com/kenwheeler/slick/pull/3817

[BenSpace48]

after second $elem.slick('unslick') content of slider removed from DOM.

This is what brought me here, reverting to 1.7.1 resolved this.

[rocketedaway]

I am also calling unslick within a window resize handler to turn off the slider on mobile. I will revert to 1.7.1 for the time being.

[skillmatic-co]

after second $elem.slick('unslick') content of slider removed from DOM.

Same happening to me. Also reverting to 1.7.1 resolved my issue.

[whoisme555]

1.7.1 still removes the slider from the dom, any other ideas?

[whoisme555]

The issue is when destroy is triggered. Changing unslick to pass in refresh as true fixes my problem, but I'm concerned what side effects I'll be causing here.

Slick.prototype.unslick = function(fromBreakpoint) {

        var _ = this;
        _.$slider.trigger('unslick', [_, fromBreakpoint]);
        _.destroy(true);

    };

In Slick.prototype.destroy, this is the section that deletes my slides from the dom

if(!refresh) {
      _.$slider.trigger('destroy', [_]);
}