JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="gallery">
  <img src='https://staticdelivery.nexusmods.com/mods/110/images/74627-0-1459502036.jpg'>
  <img src='https://thecliparts.com/wp-content/uploads/2016/07/orange-clipart-9.png'>
  <img src='http://www.bbcgoodfood.com/sites/default/files/glossary/banana-crop.jpg'> 
</div>

<div class="gallery">
  <img src='https://staticdelivery.nexusmods.com/mods/110/images/74627-0-1459502036.jpg'>
  <img src='https://thecliparts.com/wp-content/uploads/2016/07/orange-clipart-9.png'>
  <img src='http://www.bbcgoodfood.com/sites/default/files/glossary/banana-crop.jpg'> 
</div>

CSS

.gallery {
  float: left;
}

img {
  width: 300px;
  display: none;
}

img.active {
  display: block;
}

JavaScript

$('.gallery').each(function() {
	var $images = $(this).children('img').on('click', function(e) {
  
  	$(this).index() < $images.length - 1
  		? $images.removeClass('active').filter(this).next().addClass('active')
    	: $images.removeClass('active').first().addClass('active');
    
	}).first().addClass('active').end();	
});