<section class="holder">

<div id="main">
  <img src="https://source.unsplash.com/1600x900/?nature,water" alt="">
  </div>
<div id="thumbnails">
  <img src="https://source.unsplash.com/1600x900/?nature,water" alt="">
  <img src="https://source.unsplash.com/1600x900/?nature,air" alt="">
  <img src="https://source.unsplash.com/1600x900/?nature,city" alt="">
</div>
  </section>

.holder {
  width: 50%;
  margin: 0 auto;
  border: 1px solid brown;
}

#main{
  width: 80%;
/*   border: 1px solid green; */
  margin: 20px auto;
}

#main img {
  width: 100%;
  height: auto;
}

#thumbnails{
  display: flex;
  justify-content: space-around;
  padding-bottom: 10px;
}

#thumbnails img {
  width: 20%;
  height: auto
}

$(function(){
  let $imgs = $('#thumbnails img');
  let $mainImg = $('#main img');
  let direction = ['left', 'right', 'down', 'up'];
  
  
  
  $imgs.on('click', function(){
   let randomDir = Math.floor(Math.random() * 4);
      let $imgSrc = $(this).attr('src');
      // alert($imgSrc);
      $mainImg.attr('src', $imgSrc).effect('slide', {direction: direction[randomDir]}, 2000, function(){
  // alert('Function is done!')
      });
      })
    })