Как сделать карусель миниатюр на jquery?

$(".show-image").click(function() { 
    event.preventDefault(); 
    var mainImage = $(this).index();  
    $('.images img').removeClass('active'); 
    $('.images img').eq(mainImage).addClass('active');  
});

.container {display: flex;} 
.images img {display: none; margin-right: 10px;} 
.images .active {display: block} 
.thumbs { position: relative; display: flex; flex-direction: column; flex-wrap: wrap;  width: 80px; height: 105px; overflow: hidden; } 
.thumbs a { display: inline-block; margin-right: 10px; } 
.prev, .next {position: absolute; top: 40px; } 
.next {position: absolute; right: 0; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="container"> 
  <div class="images"> 
    <img src="http://placehold.it/350x150?text=1" class="active"/> 
    <img src="http://placehold.it/350x150?text=2" /> 
    <img src="http://placehold.it/350x150?text=3" /> 
    <img src="http://placehold.it/350x150?text=4" /> 
    <img src="http://placehold.it/350x150?text=5" /> 
    <img src="http://placehold.it/350x150?text=6" /> 
    <img src="http://placehold.it/350x150?text=7" /> 
    <img src="http://placehold.it/350x150?text=8" />   
  </div> 
  <div class="thumbs"> 
    <a href="http://placehold.it/350x150?text=1" class="show-image"><img src="http://placehold.it/30x30?text=1"></a> 
    <a href="http://placehold.it/350x150?text=2" class="show-image"><img src="http://placehold.it/30x30?text=2"></a> 
    <a href="http://placehold.it/350x150?text=3" class="show-image"><img src="http://placehold.it/30x30?text=3"></a> 
    <a href="http://placehold.it/350x150?text=4" class="show-image"><img src="http://placehold.it/30x30?text=4"></a> 
    <a href="http://placehold.it/350x150?text=4" class="show-image"><img src="http://placehold.it/30x30?text=5"></a> 
    <a href="http://placehold.it/350x150?text=4" class="show-image"><img src="http://placehold.it/30x30?text=6"></a> 
    <a href="http://placehold.it/350x150?text=4" class="show-image"><img src="http://placehold.it/30x30?text=7"></a> 
    <a href="http://placehold.it/350x150?text=4" class="show-image"><img src="http://placehold.it/30x30?text=8"></a>  
    <button class="prev"> < </button> 
    <button class="next"> > </button> 
</div>