Untitled

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">

        .galerija{
           width: 350px;
            height: 350px;
            top: 0;
            left: 0;
            border: 2px solid red;
            position: relative;
            box-sizing:border-box;

        }
        .slike{
            margin-left: 22px;
            box-sizing:border-box;
            margin-top: 20px;


        }
        input{
            width: 100px;
            height: 50px;
            position: relative;
            left: 20px;
            top: 10px;


        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script>
     $(document).ready(function(){

         var i = 0;

         $(".galerija div:gt(0)").hide(); //div greater then

         $("#napred").on("click", function(){

             if(i<4){
                  $("galerija div:eq("+ i +")").fadeOut(1000).next().fadeIn(1000);
                    i++;
             }
             else{
                 i=0;
                 $("galerija div:eq("+i+")").fadeIn(1000);
             }

         });

         $("#slideshow").on("click", function(){
             window.setInterval(function(){
                  if(i<4){
                  $("galerija div:eq("+i+")").fadeOut(1000).next().fadeIn(1000);
                    i++;
             }
                 else{
                        i=0;
                        $("galerija div:eq("+i+")").fadeIn(1000);
                 }
             }, 1000);


        });

      });
    </script>
</head>
    <body>
    <div class="galerija">
        <div class="slike">
            <img src="slike/1.jpg" height="300" width="300" alt="lol">
        </div>
        <div class="slike">
            <img src="slike/2.jpg" height="300" width="300" alt="lol">
        </div>
        <div class="slike">
            <img src="slike/3.jpg" height="300" width="300" alt="lol">
        </div>
        <div class="slike">
            <img src="slike/4.jpg" height="300" width="300" alt="lol">
        </div>
        </div>

        <input type="button" value="nazad" id="nazad">
        <input type="button" value="napred" id="napred">
        <input type="button" value="slideshow" id="slideshow">

    </body>
</html>