JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bigSlider"></div>

<div id="small-slider">
<div id="smallSliderOne"></div>
<div id="smallSliderTwo"></div>
<div id="smallSliderThree"></div>
<div id="smallSliderFour"></div>
</div>

CSS

body{
  width: 270px;
  outline: 1px solid;
  overflow: hidden;
}

body:after {
   visibility: hidden;
   display: block;
   content: "";
   clear: both;
   height: 0;   
}

#bigSlider{
  width: 200px;
  height: 200px;
  background: url("http://www.avataris.ru/avatars_200x200/445.jpg");
  float: left;
  
}

#small-slider {
  width: 50px;
  height: 200px;
  outline: 1px solid;
  float: right;
  
}

#small-slider > div{
  width: 50px;
  height: 50px;
  background-size: 100%;
}


#smallSliderOne{
  background: url("http://www.avataris.ru/avatars_200x200/445.jpg");
}

#smallSliderTwo{
    background: url("http://www.avatar-mix.ru/avatars_low_200x200/1431.jpg")
}

#smallSliderThree{
  background: url("http://i004.radikal.ru/1205/b7/29c79ba5a3f8.gif")
}

#smallSliderFour{
  background: url("http://erundit.ru/avatar/200/275.gif")
}

JavaScript

smallSliderOne.onclick = function(){
	bigSlider.style.backgroundImage="url('http://www.avataris.ru/avatars_200x200/445.jpg')";
}

smallSliderTwo.onclick = function(){
	bigSlider.style.backgroundImage="url('http://www.avatar-mix.ru/avatars_low_200x200/1431.jpg')";
}

smallSliderThree.onclick = function(){
	bigSlider.style.backgroundImage="url('http://i004.radikal.ru/1205/b7/29c79ba5a3f8.gif')";
}

smallSliderFour.onclick = function(){
	bigSlider.style.backgroundImage="url('http://erundit.ru/avatar/200/275.gif')";
}