Почему появляется баг в слайдере при добавлении responsive?

Question

[Мар'ян Витак]

Здравствуйте. Скажите пожалуйста почему появляется баг в слайдере при добавлении responsive? Если адаптацию в слайдере убрать, то все работает.
Посмотреть можно здесь, слайдер размещен в начале страницы в аккордеоне.
Код прикладываю:

$('.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

[Мар'ян Витак]

Причину нашел. При открытии и закрытии аккордеона дублируется код слайдера. Остается понять как это исправить.

Comments

[gretyl007]

Покажите html код слайдера.

[Мар'ян Витак]

gretyl007, html код слайдера в оригинале показать не могу, так как уже изменил структуру.

[gretyl007]

Попробуйте добавить infinite: false

[Мар'ян Витак]

gretyl007, При infinite: false слайды не дублируются, но кнопки продолжают дублироваться (кнопки расположены по стандартной разметке слайдера), да и infinite: true там нужен.

Answer 2

[gretyl007]

Попробуй так:
if (window.innerWidth <= 576) {
$('.works-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
});
}

Answer 3

[ed]

попробуйте так

$('.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,
            }
        }
    ]
});

Comments

[Мар'ян Витак]

Не помогает, дублирование не пропало.

[ed]

Мар'ян Витак, по моему ок на вашем сайте)