slider Left/Right/Up/Down Buttons

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slider</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
    <style>
        .wrap { width: 600px; margin: 0 auto; }
        h2 { text-align: center; }
        .slider { width: 100%; height: 300px; overflow: hidden; margin-bottom: 30px; position: relative;}
        .slider img { width: 100%; height: 300px; position: absolute; top: 0; left: 0; }
    </style>
</head>
<body>

    <div class="wrap">
        <h2>Slider: Left/Right/Up/Down Buttons </h2>
        <p>
            <button onclick="playSlide('left')"><i class="fas fa-chevron-left"></i></button>
            <button onclick="playSlide('right')"><i class="fas fa-chevron-right"></i></button>
            <button onclick="playSlide('up')"><i class="fas fa-chevron-up"></i></button>
            <button onclick="playSlide('down')"><i class="fas fa-chevron-down"></i></button>
        </p>
        <div class="slider">
            <img src="https://placeimg.com/600/300/nature" alt="nature">
            <img src="https://placeimg.com/600/300/animals" alt="nature">
            <img src="https://placeimg.com/600/300/arch" alt="arch">
            <img src="https://placeimg.com/600/300/people" alt="people">
            <img src="https://placeimg.com/600/300/tech" alt="tech">
        </div>
    </div>

    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        var slide = $(".slider img");
        var sno = 0;

        function playSlide(dir){
            var left_start = null, left_end = null, top_start = null, top_end = null;
            if( dir == "right" ) {
                left_start = "-100%";
                left_end = "100%";
                top_start = 0;
                top_end = 0;
            } else if ( dir == "left" ) {
                left_start = "100%";
                left_end = "-100%";
                top_start = 0;
                top_end = 0;
            } else if ( dir == "up" ) {
                left_start = 0;
                left_end = 0;
                top_start = "100%";
                top_end = "-100%";
            } else if ( dir == "down" ) {
                left_start = 0;
                left_end = 0;
                top_start = "-100%";
                top_end = "100%";
            } else {
                return;
            }
            if( slide.length == 0 ) return;
            if( $(slide[sno]).is(":animated") ) return;
            $(slide[sno]).siblings("img").css({left: left_start, top: top_start});
            $(slide[sno]).animate({left: left_end, top: top_end},1000);
            sno++;
            if( sno >= slide.length ) sno = 0;
            $(slide[sno]).animate({left: 0, top: 0},1000);
        }

    </script>
</body>
</html>