JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main-slideshow">
  <img class="show" src="http://placehold.it/300x300"/>
  <img src="http://placekitten.com/300/300" />
	<img src="http://placepuppy.it/300/300" />
</div>

<div id="slideshow-thumbs">
	<img class="active" src="http://placekitten.com/30/30/" />
	<img src="http://placekitten.com/30/30/" />
	<img src="http://placekitten.com/30/30/" />
</div>

CSS

#slideshow-thumbs img {
  opacity:.5;
}
#slideshow-thumbs img.active {
  opacity:1;
}

#main-slideshow img {
  display:none;
}
#main-slideshow img.show {
  display:block;
}

JavaScript

$("#slideshow-thumbs img").click(function(){
  $(this).addClass("active").siblings().removeClass("active");
  $("#main-slideshow img").eq($(this).prevAll().length)
    .addClass("show").siblings().removeClass("show")
});