Slick-slider ломает justify-content

Всем спасибо и добрый вечер! После включения слика происходит отключение моих функций. Уже всю голову сломал, но ничего не смог исправить. До включения:

После включения: HTML:

введите сюда код
<section class="slider">
            
            <div class="container slider__container">
                <div class="slider-for">
                    <div class="slider-for__item">
                        <div class="slider-for__item-titles">
                            <div class="slider-for__item-title">
                                Знаем все секреты красивых бровей!
                            </div>
                            <div class="slider-for__item-subtitle">
                                Профессиональные колористы нашей студии помогут Вам создать образ вашей мечты. Роскошное окрашивание и новая стрижка ждут тебя в парикмахерской ОК!
                            </div>
                        </div>
                        <div class="slider-for__links">
                            <div class="slider-for__links-button">
                                Перейти в магазин
                            </div>
                            <div class="slider-for__links-link">
                                <a href="#">Узнать больше о нас</a>
                            </div>
                        </div>
                    </div>
                    <div class="slider-for__item">
                        <div class="slider-for__item-titles">
                            <div class="slider-for__item-title">
                                Быть яркой легко! На выбор шикарная палитра красок MATRIX и KAPOUS.
                            </div>
                            <div class="slider-for__item-subtitle">
                                Профессиональные колористы нашей студии помогут Вам создать образ вашей мечты. Роскошное окрашивание и новая стрижка ждут тебя в парикмахерской ОК!
                            </div>
                        </div>
                        <div class="slider-for__links">
                            <div class="slider-for__links-button">
                                Перейти в магазин
                            </div>
                            <div class="slider-for__links-link">
                                <a href="#">Узнать больше о нас</a>
                            </div>
                        </div>
                    </div>
                    <div class="slider-for__item">
                        <div class="slider-for__item-titles">
                            <div class="slider-for__item-title">
                                красивых бровей!
                                Профессиональный бровист за 15 минут скорректирует вам симметричную форму бровей и сделает Ваш образ гармоничным и выразительным.
                                
                                Подробнее Узнать больше о нас 
                                Стильно стрижём и бреем. Экономим Ваше время и деньги.
                            </div>
                            <div class="slider-for__item-subtitle">
                                Профессиональные колористы нашей студии помогут Вам создать образ вашей мечты. Роскошное окрашивание и новая стрижка ждут тебя в парикмахерской ОК!
                            </div>
                        </div>
                        <div class="slider-for__links">
                            <div class="slider-for__links-button">
                                Перейти в магазин
                            </div>
                            <div class="slider-for__links-link">
                                <a href="#">Узнать больше о нас</a>
                            </div>
                        </div>
                    </div>
                    <div class="slider-for__item">
                        <div class="slider-for__item-titles">
                            <div class="slider-for__item-title">
                                Быть яркой легко! На выбор шикарная палитра красок MATRIX и KAPOUS.
                            </div>
                            <div class="slider-for__item-subtitle">
                                Профессиональные колористы нашей студии помогут Вам создать образ вашей мечты. Роскошное окрашивание и новая стрижка ждут тебя в парикмахерской ОК!
                            </div>
                        </div>
                        <div class="slider-for__links">
                            <div class="slider-for__links-button">
                                Перейти в магазин
                            </div>
                            <div class="slider-for__links-link">
                                <a href="#">Узнать больше о нас</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="slider-nav">
                    <div class="slider-for__item">
                    <div class="slider-nav__images">
                        <div class="slider-nav__images-background slider-nav__images-image">
                            <img src="images/slider/hair.jpg" alt="">
                        </div>
                        <div class="slider-nav__images-front">
                            <img src="images/slider/girl.jpg" alt="">
                        </div>
                    </div>
                </div>
                <div class="slider-for__item">
                    <div class="slider-nav__images">
                        <div class="slider-nav__images-background slider-nav__images-image">
                            <img src="images/slider/hair.jpg" alt="">
                        </div>
                        <div class="slider-nav__images-front">
                            <img src="images/slider/girl.jpg" alt="">
                        </div>
                    </div>
                </div>
                <div class="slider-for__item">
                    <div class="slider-nav__images">
                        <div class="slider-nav__images-background slider-nav__images-image">
                            <img src="images/slider/hair.jpg" alt="">
                        </div>
                        <div class="slider-nav__images-front">
                            <img src="images/slider/girl.jpg" alt="">
                        </div>
                    </div>
                </div>
                <div class="slider-for__item">
                    <div class="slider-nav__images">
                        <div class="slider-nav__images-background slider-nav__images-image">
                            <img src="images/slider/hair.jpg" alt="">
                        </div>
                        <div class="slider-nav__images-front">
                            <img src="images/slider/girl.jpg" alt="">
                        </div>
                    </div>
                </div>

                </div>
            </div>
        </div>
            

        
    </section>

CSS:

.slider{
&__container{
    display: flex;
    justify-content: space-between;
}

}

.slider-for{
display: flex;
flex-direction: column;
justify-content: space-between;
max-width: 550px;
height: auto;
&__item{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

}

.slider-nav{
max-width: 332px;
display: flex;
flex-direction: column;
height: 100%;
&__images{
    position: relative;
    &-background{
        position: absolute;
    }
}

}

JS:

      $('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: false,
    asNavFor: '.slider-nav'
  });
  $('.slider-nav').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: false,
    arrows:false,
    fade: true,
  });