JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slideshow">
    
    <ul class='big'>
      <li><img src="http://imageshack.us/a/img845/6999/ut3b.jpg" /></li>
      <li><img src="http://imageshack.us/a/img850/1646/pu9p.jpg" /></li>
      <li><img src="http://imageshack.us/a/img22/4640/6a5q.jpg" /></li>
      <li><img src="http://imageshack.us/a/img513/4973/h6g3.jpg" /></li>
    </ul>       
    
    <ul class='thumb'>
      <li><img src="http://imageshack.us/a/img845/6999/ut3b.jpg" /></li>
      <li><img src="http://imageshack.us/a/img850/1646/pu9p.jpg" /></li>
      <li><img src="http://imageshack.us/a/img22/4640/6a5q.jpg" /></li>
      <li><img src="http://imageshack.us/a/img513/4973/h6g3.jpg" /></li>
    </ul>
    
</div>

<div class="slideshow">
    
    <ul class='big'>
      <li><img src="http://imageshack.us/a/img845/6999/ut3b.jpg" /></li>
      <li><img src="http://imageshack.us/a/img850/1646/pu9p.jpg" /></li>
      <li><img src="http://imageshack.us/a/img22/4640/6a5q.jpg" /></li>
      <li><img src="http://imageshack.us/a/img513/4973/h6g3.jpg" /></li>
    </ul>       
    
    <ul class='thumb'>
      <li><img src="http://imageshack.us/a/img845/6999/ut3b.jpg" /></li>
      <li><img src="http://imageshack.us/a/img850/1646/pu9p.jpg" /></li>
      <li><img src="http://imageshack.us/a/img22/4640/6a5q.jpg" /></li>
      <li><img src="http://imageshack.us/a/img513/4973/h6g3.jpg" /></li>
    </ul>
    
</div>

CSS

.slideshow{
    margin-bottom: 80px;
}

.slideshow .big, .slideshow .controls, .slideshow .thumb {
    list-style-type : none;
    position : relative;
    margin : 0;
    padding : 0;
    width : 480px;
}
.slideshow .big li {
    position : absolute;
    top : 0;
    left : 0;
    display : none;
}
.slideshow .big li:first-child {
    display : block;
}
.slideshow .big img, .slideshow .big {
    width : 180px;
    height : 160px;
}
.slideshow .controls {
    position : absolute;
    top : 160px;
}
.slideshow .controls li {
    width : 10px;
    height : 10px;
    background-color : #666;
    opacity : .2;
    color : #ccc;
    float : left;
    font-size : 24px;
    text-align : center;
    line-height : 40px;
    cursor : pointer;
}
.slideshow .controls li:hover {
    opacity : 1;
}
.slideshow .controls .next {
    float : right;
}
.slideshow .thumb img {
    width : 45px;
}
.slideshow .thumb li {
    float : left;
    cursor : pointer;
}
.slideshow .thumb li:hover {
    opacity : .8;
}

JavaScript

//When we click on thumb img
$('.thumb li', '.slideshow').hover(function() {
    
    var
        //SlideShow
        sshow = $(this).closest('.slideshow'),
        //Big
        big = sshow.find('.big'),
        //thumb
        thumb = sshow.find('.thumb'),
        //Get index
        indx = thumb.find('li').index(this),
        //Current index
        currentIndx = big.find('li').index(big.find('li:visible'));
    
    //If currentIndx is same as clicked indx don't do anything
    if(currentIndx == indx) {
        return;
    }
    
    big
        //Fadeout current image
        .find('li:visible').fadeOut().end()
        //Fadein new image
        .find('li:eq(' + indx + ')').fadeIn();
});