Why secondStartSlide() function is 'ureachable code' inside the firstStartSlide()?

I aim to call secondStartSlide() inside firstStartSlide() inside the condition I declared, but an err of 'ureachable code' for secondStartSlide() is popped when I call it inside the condition of firstStartSlide(), though I think I made both of these functions global so I could call them wherever I wanted. how can I fix this?

$(function () {

    let bigContainerr = document.getElementsByClassName('bigContainer')[0];
    const imageCount = 3;
    const eachImageWidth = 700;
    const eachImageHeight = 360;

    let timeout = 1000;
    let index = 1;

    function domElementsCreator() {
        let main = document.createElement('div');
        main.classList.add('main');
        bigContainerr.append(main);

        let imgWrapper = document.createElement('div');
        imgWrapper.classList.add('img-wrapper');
        $(main).append(imgWrapper);
    }

    //-----------------------------  DOM elements creator  -------------------------------
    domElementsCreator()

    function createImages() {
        let slideContainer = document.querySelector('.main');
        let slide = document.querySelector('.img-wrapper');
        let slides = document.querySelectorAll('.img-wrapper img');
        $(slideContainer).css('width', eachImageWidth).css('height', eachImageHeight);
        $(slide).css('width', eachImageWidth * imageCount * 2);
        for (let i = 1; i <= imageCount; i++) {

            let img = document.createElement('img');
            $(img).addClass('create');
            $(img).attr('src', `https://via.placeholder.com/700x360`);
            $(img).attr('id', `image-${i}`);
            $(slide).append(img);
        }
        i = 1;
    }

    slideContainer = document.querySelector('.main');
    slides = document.querySelectorAll('.img-wrapper img');
    slide = document.querySelector('.img-wrapper');

    // ------------------- image creator function ---------------------
    createImages()

    function firstStartSlide (){
        slides = document.querySelectorAll('.img-wrapper img');
        index++;
        slide.style.transform = `translateX(${-eachImageWidth * (index - 1)}px)`;
        slide.style.transition = '1000ms';

        setTimeout(firstStartSlide, timeout)
        if (slide.style.transform === `translateX(${-eachImageWidth * (imageCount + 2)}px)`){
            return bigContainerr.innerHTML = '';
            secondStartSlide()
        }
    }
    firstStartSlide();
    //---------------------------  second round  -----------------------------
    function secondStartSlide() {

        domElementsCreator();

        createImages()

        $('.img-wrapper').css('left' , '0')

    }

})

 *{
            padding: 0;
            margin: 0;
        }
        .main{
            margin: 100px auto;
            border: 5px solid #000;
            position: relative;
            /*overflow: hidden;*/
        }
        .img-wrapper{
            position: relative;
            left: 100%;
        }
        .img-wrapper img.create{
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bigContainer">
</div>