JSFiddle - React, Tailwind, and code Playground

HTML

<div class="images_container">
   <img id="image_1" src="/image1.jpg" style="width:100px; height:100px;">
   <img id="image_2" src="/image2.jpg" style="width:100px; height:100px;">
   <img id="image_3" src="/image3.jpg" style="width:100px; height:100px;">
     <img id="image_3" src="/image3.jpg" style="width:100px; height:100px;">
       <img id="image_3" src="/image3.jpg" style="width:100px; height:100px;">
         <img id="image_3" src="/image3.jpg" style="width:100px; height:100px;">
           <img id="image_3" src="/image3.jpg" style="width:100px; height:100px;">
             <img id="image_3" src="/image3.jpg" style="width:100px; height:100px;">
</div>
<div class="navigation">
    <a href="#" class="display" id="next">
next
    </a>
    <a href="#" class="display" id="prev">
previous
    </a>
</div>

CSS

* {}

.images_container {
   overflow-x: scroll;
   overflow-y: hidden;
   max-height: 10rem;
   white-space: nowrap;
}

.images_container.thumbnails {
   max-height: 10rem;
}

.images_container img {
   vertical-align: top;
   border: 1px solid green;

}

.images_container.thumbnails img {
   height: 10rem;
   width: 60px;
   border: 1px solid black;
}

JavaScript

var elms = document.getElementsByClassName("thumbnail");
    for (var i = 0; i < elms.length; i++) {
       elms[i].onclick = function(event) {
          event.preventDefault();
          event.stopPropagation();
          var id = this.parentNode.href.substr(this.parentNode.href.lastIndexOf('/') + 2);
          var v = document.getElementById(id).getBoundingClientRect().left;
          document.getElementsByClassName("images_container")[0].scrollLeft += v;
       }
    }
    
    $('div.section').first();

$('a.display').on('click', function(e) {
    e.preventDefault();

      var t = $(this).attr('id'),
      that = $(this);

    if (t === 'next' && $('.current').next('div.section').length > 0) {
        var $next = $('.current').next('.section');
        var top = $next.offset().top;
        
        $('.current').removeClass('current');     
        $(function () {
               $next.addClass('current');
               $('html, body').animate({scrollTop: $('.current').offset().top }, 'slow');
            
        });
  } else if (t === 'prev' && $('.current').prev('div.section').length > 0) {
        var $prev = $('.current').prev('.section');
        var top = $prev.offset().top;
        
        $('.current').removeClass('current');
      
        $(function () {
               $prev.addClass('current');
               $('html, body').animate({scrollTop: $('.current').offset().top }, 'slow');
        });
  } 
});