title: Scroll div images horizontally using arrow <a> tag without JQUERY
body: <p>I need to scroll a set of images HOROZONTALLY in a div on clicking the left and right arrow (anchor tags) using pure javascript. I see lot number of solutions using jquery. But for some reason I cannot use jquery in my site. My code is below. Any help is much appreciated. I need to implement something similar to this <a href="http://jsfiddle.net/yfqyq9a9/2/" rel="nofollow noreferrer">http://jsfiddle.net/yfqyq9a9/2/</a> without jquery.</p>
  
  <pre><code>&lt;div class="ImageContainer"&gt;
  &lt;a id="prevPageButton" href="#" class="prevPageButton"  role="button"&gt;&lt;/a&gt;
  &lt;div class="SKUImages-wrapper"&gt;
  
                  &lt;img itemprop="image" id="Image1" src="01.jpg" alt="" /&gt;
  
                  &lt;img itemprop="image" id="Image2" src="02.jpg" alt="" /&gt;
  
                  &lt;img itemprop="image" id="Image3" src="03.jpg" alt="" /&gt;
  
                  &lt;img itemprop="image" id="Image4" src="04.jpg" alt="" /&gt;
  
                  &lt;img itemprop="image" id="Image5" src="05.jpg" alt="" /&gt;
  
                  &lt;img itemprop="image" id="Image6" src="06.jpg" alt="" /&gt;
  
                  &lt;img itemprop="image" id="Image7" src="07.jpg" alt="" /&gt;
  
                  &lt;img itemprop="image" id="Image8" src="08.jpg" alt="" /&gt;
  
  &lt;/div&gt;
      &lt;div class="nextPageButton-wrap"
      &lt;a id="nextPageButton" href="#" class="nextPageButton" role="button" &gt;&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>