JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sliderImage">
  <img src="icon-facebook.png" name="slidershow" />
</div>

<table>
    <tr>
        <td align="left">
            <a href="" class="sliderPrevious">Previous</a>
        </td>

        <td align="right">
            <a href="" class="sliderNext">Next</a>
        </td>       
    </tr>
</table>

<div id="description">
</div>

JavaScript

(function(){
    var Image = new Array('icon-facebook.png','icon-google.png','icon-mail.png','icon-twitter.png');
    var Description = new Array('This is an facebook icon','This is an google icon','This is an mail icon','This is an twitter icon');

    var sliderPrevious = document.getElementsByClassName('sliderPrevious')[0];
    var sliderNext = document.getElementsByClassName('sliderNext')[0];
    var sliderAuto = document.getElementsByClassName('sliderAuto')[0];
    var myAutoSlider;

    var Image_Number = 0;
    var Image_Length = Image.length - 1;

    function change_image(num){
      		console.log(num);
          Image_Number = Image_Number + num;

          if(Image_Number > Image_Length){
              Image_Number = 0;
          }

          if(Image_Number < 0){
            Image_Number = Image_Length;

          }

          document.slidershow.src = Image[Image_Number];
          document.getElementById('description').innerHTML = Description[Image_Number];

          return false;
    };

    function autoSlider(){

        myAutoSlider = setInterval(function(){change_image(1)}, 1000);
    };

    function myEventLisener(target, event, myNumber){
              target.addEventListener(event, function(e){
                         e.preventDefault();
                         change_image(myNumber);

                         clearInterval(myAutoSlider);//if click ,then stop autoplay
              });          
    };
    autoSlider();
    myEventLisener(sliderPrevious,'click', -1);
    myEventLisener(sliderNext,'click', 1);
}());