JSFiddle - React, Tailwind, and code Playground

HTML

<div class="images">
  <img class="active" src="http://www.cutestpaw.com/wp-content/uploads/2016/02/In-the-spotlight.jpg">
  <img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/Bath-time-with-ducky.jpg">
  <img src="http://www.cutestpaw.com/wp-content/uploads/2016/03/FB_IMG_1452981788903.jpg">
</div>

<div class="previous">
previous
</div>

<div class="next">
next
</div>

CSS

img {
  width: 25%;  
  display: none;
  float: left;
}

img.active {
  display: block;
}

.previous, .next {
  font-size: 14px;
  border: 1px solid;
  padding: 3px;
  display: inline-block;
  margin-top: 8px;
  cursor: pointer;
}

JavaScript

$('.next').on('click', function() {
  var active = $('img.active');
  var next = active.next('img');
  
  if (next.length) {
  	active.removeClass('active');
    next.addClass('active');
  } else {
  	active.removeClass('active');
  	$('.images img:first').addClass('active');
  }
});

$('.previous').on('click', function() {
  var active = $('img.active');
  var prev = active.prev('img');
  
  if (prev.length) {
  	active.removeClass('active');
    prev.addClass('active');
  } else {
  	active.removeClass('active');
  	$('.images img:last').addClass('active');
  }
});