Resize problem: Slick slider with centerPadding but slide it's a bootstrap container

Question

I have a slick slider with slides created like a bootstrap container.

<div class="container">
    <div class="row">
        <div class="col-12">
            bla bla bla
        </div>
        ...
    </div>
</div>

The slick is configured like

jQuery(".slide_header").slick({
    slidesToScroll: 1,
    slidesToShow: 1,
    speed: 1500,
    dots:true,
    centerMode: true,
    infinite: true,
    centerPadding:(parseFloat((jQuery(window).width()-jQuery(".container").outerWidth())/2))+'px',
    customPaging : function(slider, i) {
        var thumb = jQuery(slider.$slides[i]).data();
        return '<button>&bull;</button>';
    }
});

because I want a central slide and the prev/next visible partially, and it's working like a charm when the page is loaded.

The problem is that when I resize the window, the slide change its width and everything goes wrong. The centerPadding and the width must be recalculated, how can I? I've tried everything going crazy!! Refresh slick? No. Recalculate padding on resize? No.

Just to be clear: I'm trying to replicate the slide like this: https://www.mckinsey.it/

Thanks!

question from:https://stackoverflow.com/questions/65904294/resize-problem-slick-slider-with-centerpadding-but-slide-its-a-bootstrap-conta

Answer 1

Solved by destroying it (with the code below) and recreating (after this command) during the onResize event.

jQuery(".slide_header").slick('unslick');