Почему не работает slick js слайдер?

Question

[Анастасия]

Есть вот такая стурктура страницы:

<div class="wrapper-flex">
    <div class="wrapper-sidebar">
        Sidebar
    </div>
    <div class="wrapper-content">
        <div class="wrapper">
            <div class="col-full">
                <div class="slick-catalog">
                    <div class="slick-child_flex">
                        <div class="wrapper">
                            <div class="col4">
                                Текст
                            </div>
                            <div class="col4">
                                Текст
                            </div>
                            <div class="col4">
                                Текст
                            </div>
                        </div>
                    </div>
<div class="slick-child_flex">
                        <div class="wrapper">
                            <div class="col4">
                                Текст
                            </div>
                            <div class="col4">
                                Текст
                            </div>
                            <div class="col4">
                                Текст
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

.wrapper-flex {
        display: flex;
    }

    .wrapper-sidebar {
        flex-basis: 25%;
    }

    .wrapper-content {
        flex-basis: 75%;
    }

    .wrapper {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;
    }

    .col-full {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .slick-child_flex {
        display: flex;
        align-items: center;
    }

    .col4 {
        flex: 0 0 33%;
        max-width: 33%;
    }

Но когда я подключаю slick вся страница разваливается. В чем моя ошибка?

$(function () {
        $(".slick-catalog").slick({
            arrows: false,
        });
    });

Comments

[Froggyweb]

сделай пример в песочнице.
Слик работает очень неплохо и предсказуемо.

Answer 1

[Виталий Першин]

Поместите каждый слайд в пустой div а у же внутри него вставляйте свои блоки slick-child_flex
Помимо этого необходимо ограничить .wrapper-content по ширине так как flex-basis: 75% позволяет тянуть блок на сколько угодно и ваши слайды его благополучно растягивают как хотят. Как минимум такому флекс элементу нужно задать размер min-width: 0;

Answer 2

[kryamk]

https://www.youtube.com/watch?v=rXNfDfqtM3M&t=485s

Comments

[Anton Semenov]

Точно! Поставил лайк этому видео и слайдер заработал! Улет!