<div class="slick_one por">
    <div class="slick03-1">
        <div class="slick-slide">
            <img src="画像名" alt="">
        </div>
        <div class="slick-slide">
            <img src="画像名" alt="">
        </div>
        <div class="slick-slide">
            <img src="画像名" alt="">
        </div>
    </div>
    <div class="slick03-2 poa">
        <div class="slick-slide">
            1
        </div>
        <div class="slick-slide">
            2
        </div>
        <div class="slick-slide">
            3
        </div>
    </div>
    <div class="slide-dots poa"></div>
</div>

.por {
  position: relative;
}
.poa {
  position: absolute;
}
.slick_one {
    width: 500px;
    height: 350px;
    .slick03-1 {
        width: 500px;
        height: 350px;
        .slick-prev {
            display: none!important;
        }
        .slick-next {
            width: 55px;
            height: 55px;
            border-radius: 50%;
            background-color: transparent;
            position: absolute;
            bottom: 14.25%;
            right: 5.75%;
            z-index: 2;
        }
        .slick-list {
            width: 100%;
            height: 100%;
            .slick-slide {
                width: 100%;
                height: 100%;
                img {
                    width: 100%;
                }
            }
        }
    }
    .slide-dots {
        bottom: 3%;
        right: 0;
        left: 0;
        margin: 0 auto;
        ul {
            display: flex;
            flex-direction: row;
            justify-content: center;
            padding-left: 0;
            li {
                display: inline;
                width: 50px;
                margin-right: 10px;
                button {
                    text-indent: -99999px;
                    position: relative;
                    &:after {
                        content: "";
                        position: absolute;
                        top: 0;
                        right: 0;
                        left: 0;
                        background-color: #fff;
                        width: 50px;
                        height: 5px;
                    }
                }
            }
            li.slick-active {
                button {
                    &:after {
                        background-color: #d27364;
                    }
                }
            }
        }
    }

    .slick03-2 {
        width: 500px;
        height: 350px;
        top: 50%;
        right: auto;
        left:0;
        transform: translateY(-50%);
        .slick-slide {
            font-size: 100px;
            color: #fff;
            text-align: center;
        }
        .slick-list {
            width: 100%;
            height: 100%;
            .slick-slide {
                width: 100%;
                height: 100%;
            }
        }
    }
}

$(function(){
  $('.slick03-1').slick({
    autoplay: true,
    arrows:true,
    dots: true,
    appendDots: $('.slide-dots'), // ボタン位置指定（htmlのドットナビゲーションを表示させたい位置にこのクラスをもつ要素を記述する）
    prevArrow: '<button class="slick-prev slick-arrow">', // 矢印のhtml要素を記述
    nextArrow: '<button class="slick-next slick-arrow">', // 矢印のhtml要素を記述
    asNavFor:'.slick03-2', // 連動させるスリックを指定
  });
});

$(function(){
  $('.slick03-2').slick({
    arrows:false,
    dots: false,
    draggable:false, // ドラッグでの切り替え
    asNavFor:'.slick03-1', // 連動させるスリックを指定
    fade: true, // フェードインで表示する
    speed: 1000,
  });
});