Trying to create a image slider without jquery : So trying to get this image slider to work without jquery. using font awesome icons as my next and previous buttons.When i change the value of the imgCounter variable the image changes however i cant get it to work properly.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    	var $= function(id){
    		return document.getElementById(id);
    	}

      
         var imgCounter=0;

          var next = function(){
           
           if(imgCounter<6){
           	imgCounter++;
           }
           else{
           	imgCounter=0;
           }
    	 	
     }

      window.onload=function(){
        // where image will display
      		var imageNode = $('display');
    	var slideNode=$('slides');
      // gathers all the images in an array
    	var slides = document.getElementsByClassName('img');
     `` //to target a specific index
    	 imgCounter= imgCounter% slides.length;

    	 var image= slides[imgCounter];
  //to switch the current photo with the next one in the array
    	 	 imageNode.src=image.src;
        $('right').onclick= next;
      };


<!-- language: lang-html -->

    	 <section id="slider">
    			   <img  id="display" src="">
                  
    		       <i id="left"class="fa fa-arrow-left fa-4x"aria-hidden="true" ></i>
    		 	   <i id="right" class="fa fa-arrow-right fa-4x" aria-hidden="true"></i>
    		 	    <div id="slides">
    			 	    <img class="img" src="images/20anniversary-large.png">
    			 	    <img class="img"src= "images/53rd.jpg">
    			 	    <img class="img"src="images/Award.png">
    			 	    <img class="img"src="images/rotator-03-lg.jpg">
    			 	    <img class="img"src= "images/rotator01lg.jpg">
    			 	    <img class="img"src="images/rotator-02-lg.jpg">
                    </div>
    		 	 
    		 	
              </div>
    		 </section>

<!-- end snippet -->

