Why is the screen blank when jq fadein runs for the first time?

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <style type="text/css">
            ul,
            li,
            body {
                margin: 0;
                padding: 0;
            }
            
            li {
                list-style: none;
            }
            
            .flow img {
                width: 500px;
                height: 200px;
                display: block;
            }
            
            -sharpwrap {
                position: relative;
            }
            
            -sharpwrap .flow {
                position: relative;
            }
            
            -sharpwrap .flow li {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }
            
            -sharpwrap .left,
            .right {
                width: 30px;
                height: 30px;
                border-radius: 30px;
                border: 1px solid -sharpfff;
                line-height: 30px;
                text-align: center;
                cursor: pointer;
                position: absolute;
                top: 50%;
                margin-top: -15px;
                color: -sharpfff;
            }
            
            -sharpwrap .left:hover,
            .right:hover {
                background-color: -sharpccc;
            }
            
            .left {
                left: 10px;
            }
            
            .right {
                right: 10px;
            }
            
            -sharpwrap .list {
                position: absolute;
                bottom: 10px;
                left: 50%;
                transform: translateX(-50%);
            }
            
            -sharpwrap .list>li {
                width: 40px;
                height: 10px;
                border: 1px solid -sharpccc;
                border-radius: 7px;
                margin-left: 10px;
                float: left;
                cursor: pointer;
            }
            
            .color {
                background-color: -sharpfff;
            }
        </style>
    </head>

    <body>
        <div id="wrap">
            <ul class="flow">
                <li>
                    <img src="https://img.codeshelper.com/upload/img/2021/03/01/ezye4epae3h1647.jpg" alt="">
                </li>
                <li>
                    <img src="https://img.codeshelper.com/upload/img/2021/03/01/mwp324ayaam1648.jpg" alt="">
                </li>
                <li>
                    <img src="https://img.codeshelper.com/upload/img/2021/03/01/i41zls1liiw1649.jpg" alt="">
                </li>
                <li>
                    <img src="https://img.codeshelper.com/upload/img/2021/03/01/jzmce4bxvnm1650.jpg" alt="">
                </li>
            </ul>
            <div class="left"><</div>
            <div class="right">></div>
            <ul class="list">
                <li class="color"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <script>
            var $wrap = $("-sharpwrap");
            var flow = $("-sharpwrap .flow");
            var oli = $("-sharpwrap .flow li");
            var len = oli.length;
            var oimgAll = $("-sharpwrap .flow li img");
            var oleft = $(".left");
            var oright = $(".right");
            var index=0;
            var img = oli.first().children();
            flow.css({
                "width": img.width(),
                "height": img.height()
            })
            $wrap.css({
                "width": img.width(),
                "height": img.height()
            })
            oright.on("click", function() {
                display()
            })

            function display() {
                index=index+1;
                oli.fadeOut("100");
                console.log(index);
                oli.eq(index).fadeIn("100");
            }
        </script>
    </body>

</html>
as the question shows, why does the first run go blank? How to solve this problem?