Подскажите, как нижний слайдер поставить вертикально и слева от "главного" слайда? Использую slider-slick

<div class="slide-part">
                <div class="slider-big">
                    <div class="slider-big__item">
                        <img src="img/slider1.png" alt="picture">
                    </div>
                    <div class="slider-big__item">
                        <img src="img/slider2.png" alt="picture">
                    </div>
                    <div class="slider-big__item">
                        <img src="img/slider.png" alt="picture">
                    </div>
                    <div class="slider-big__item">
                        <img src="img/slider4.png" alt="picture">
                    </div>
                </div>
                <div class="slider">
                    <div class="slider__item">
                        <img src="img/slider1.png" alt="picture">
                    </div>
                    <div class="slider__item">
                        <img src="img/slider2.png" alt="picture">
                    </div>
                    <div class="slider__item">
                        <img src="img/slider3.png" alt="picture">
                    </div>
                    <div class="slider__item">
                        <img src="img/slider4.png" alt="picture">
                    </div>
                </div>
            </div>


    $(document).ready(function () {
        $('.slider').slick({
            slidesToShow: 3,
            slidesToScroll: 1,
            VERTIverticalCAL: true,
            asNavFor: '.slider-big',
            arrows: false,
        });

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

        
    });
    .slide-part {
        margin: 40px 0 0 0;
        max-width: 50%;
        text-align: right;
        position: relative;
    }
    .slider {
            &__item {
            }
    }
    .slider .slider__item img {
        max-height: 105px;
    }
    .slider-big {
        &__item {
        }
    }
    .slider .slick-track{
        display: flex;
        align-items: flex-start;
        }
    .slider .slick-list {
        overflow: hidden;
    }
    .slider-big .slick-list {
        overflow: hidden;
    }
    .slider-big .slick-track{
        display: flex;
        align-items: flex-start;
        }
    .slider-big .slick-dots{
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #FFB800;
        height: 95px;`введите сюда код`
        position: relative;
        overflow: hidden;
        max-width: 75.1%;
        margin-left: auto;
    }
    .slider-big .slick-arrow{
        position: absolute;
        top: 48%;
        z-index: 10;
        left: 78%;
        font-size: 0;
        width: 16px;
        height: 28px;
    }
    .slider-big .slick-arrow.slick-prev{
        background: url('../img/arr-right.png') no-repeat;
        margin-left: 60px;
    }
    .slider-big .slick-arrow.slick-next{
        background: url('../img/arr-left.png') no-repeat;
    }
    .slider-big .slick-dots{
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #FFB800;
        height: 95px;
        position: relative;
        overflow: hidden;
        margin-left: auto;
    }
    .slider-big .slick-dots li.slick-active button{
        background-color: #ffffff;
        opacity: 1;
        width: 9px;
        height: 9px;
    }
    .slider-big .slick-dots li button{
        font-size: 0;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin: 0 10px;
        background-color: #ffffff;
        opacity: 0.45;
    }