slider right to left

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slider</title>
    <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: Right -&gt; Left </h2>
        <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(){
            if( slide.length == 0 ) return;
            $(slide[sno]).siblings("img").css({left: "100%"});
            $(slide[sno]).animate({left: "-100%"},1000);
            sno++;
            if( sno >= slide.length ) sno = 0;
            $(slide[sno]).animate({left: "0"},1000);
        }

        var timer = setInterval(function(){ playSlide(); }, 2000);

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