Why does a bug appear in the slider when adding responsive?

Question

Bootstrap

Hello. Please tell me why a bug appears in the slider when adding responsive? If you remove the adaptation in the slider, then everything works.
You can see it here , the slider is placed at the top of the page in the accordion.
I am attaching the code:

$('.works-slider').slick({
    slidesToShow: 2,
    slidesToScroll: 2,
    fade: false,
    arrows: true,
    dots: false,
    swipe: true,
    responsive: [
        {
            breakpoint: 576,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
            }
        }
    ]
});

$('.collapse__content').on('shown.bs.collapse', function () {
    $('.works-slider').slick('reinit');
});

Answer 1

I found the reason. When opening and closing the accordion, the slider code is duplicated. It remains to figure out how to fix it.

Answer 2

Try this:
if (window.innerWidth <= 576) {
$('.works-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
});
}

Answer 3

try like this

$('.works-slider').not('.slick-initialized').slick({
    slidesToShow: 2,
    slidesToScroll: 2,
    fade: false,
    arrows: true,
    dots: false,
    swipe: true,
    responsive: [
        {
            breakpoint: 576,
            settings: {
                slidesToShow: 1,
                slidesToScroll: 1,
            }
        }
    ]
});