JSFiddle - React, Tailwind, and code Playground

HTML

<div class="field-name-field-image">
  <ul class="field-items">
    <li><img src="http://malsup.github.io/images/p1.jpg"></li>
    <li><img src="http://malsup.github.io/images/p2.jpg"></li>
    <li><img src="http://malsup.github.io/images/p3.jpg"></li>
  </ul>
</div>

CSS

.field-name-field-image {
    width: 260px;
    overflow: hidden;
    position: relative;
}
.field-name-field-image .slider-container img {
    width: 260px;
    height: 190px;
}
#nav {position: relative;}
#nav > * {
    position: absolute;  
    background: red;
    width: 30px;
    height: 20px;
    top: 30px;
}
#button-previous {left: 0;}
#button-next {right: 0;}
.field-name-field-image ul.field-items {
    width: 20000px;
    padding: 0;
    margin: 0 30px;
}
.field-name-field-image ul.field-items li {
    list-style: none;
    float: left;
}
.field-name-field-image .field-items li img {
    width: 100px;
    height: 75px;
}

JavaScript

$('<div class="slider-container">').prependTo('.field-name-field-image');
$('.slider-container').after('<nav id="nav"><div id="button-previous"><span>prev</span></div><div id="button-next"><span>next</span></div></nav>');

$('.field-name-field-image li').first().addClass('active');
$('.field-name-field-image li.active img').clone().appendTo('.slider-container');

$('.field-name-field-image li').click(function() {
  $('.field-name-field-image li').removeAttr('class');
  $(this).addClass("active");

  $('.slider-container img').attr('src', $('.field-name-field-image li.active img').attr('src'));
});