horizontally auto scroll to active thumbnail li

HTML

<a href="javascript:;" class="next" id="right-arrow">&larr;</a>
<div class="img-cont">
  <img id="showcase-book-img" src="" />
</div>
<a href="javascript:;" class="prev" id="left-arrow">&rarr;</a>
<br>
<div class="book-list-headbox">
  <div class="page-number-box">
    <label for="" id="total-page" value="" class="mb-0"></label>
    <span class="separator">of</span>
    <input type="text" id="current-page" value="1">
  </div>
</div>
<ul class="book-list" id="book-list">
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/30x30&text=A" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/30x30&text=B" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/30x30&text=C" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/30x30&text=D" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/30x30&text=E" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/30x30&text=F" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/30x30&text=G" />
  </li>
    <li class="book">
    <img class="thumb" src="http://www.placehold.it/30x30&text=A" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/30x30&text=B" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/30x30&text=C" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/30x30&text=D" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/30x30&text=E" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/30x30&text=F" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/30x30&text=G" />
  </li>
</ul>

CSS

*{
  margin:0;
  padding:0;
}
.active {
  border-bottom: 1px solid #990000;
}

.img-cont {
  height: 30px;
  width: 30px;
}

.book-list {
  display: flex;
  overflow-x: auto;
  width: 250px;
  border: 1px solid #000;
  padding: 0;
}

.book-list .book {
  justify-content: flex-start;
  list-style: none;
  margin: 5px;
}

JavaScript

$(function(){
	var totalList = $('.book').length;
	$('#total-page').text(totalList);
 
$(".book").click(function() {
	var currIndex = $(this).index();
	var src = $(this).find('img').attr('src');
	$("#showcase-book-img").fadeOut(function() {
		$(this).on('load', function() {
			$(this).fadeIn();
		});

		$(this).attr("src", src);
	});
	activateBook(currIndex);
  $('#current-page').val(currIndex+1); //display current index to textbox
});


var currIndex = 0;
//click the first thumb to begin
$(".book:first").click();

//move next
$("#left-arrow").click(function() {
	if(currIndex ==totalList) return false;
	else $(".book.active").next().click();
  $('#current-page').val(currIndex+1); //display current index to textbox
});

//move previous 
$("#right-arrow").click(function() {
	if(currIndex==0) return false;
	else $(".book.active").prev().click();
  $('#current-page').val(currIndex+1); //display current index to textbox
});

$('#current-page').change(function(e) {
	var page = parseInt($(this).val());
	var page = (Number.isInteger(page) && page >= 1 && page <= totalList) ? page : 1;
	$(this).val(page);
	$('.book').eq(page-1).click(); //let's route all to click event
});


function activateBook(i) //i = index of li.book
{
	currIndex = i;
	$(".book").removeClass("active"); //remove class
	$(".book").eq(i).addClass("active"); //apply class to selected thumb
	var left = $(".book.active").position().left;
	var currScroll= $(".book-list").scrollLeft(); 
	var contWidth = $('.book-list').width()/2; 
	var activeOuterWidth = $(".book.active").outerWidth()/2; 
	left= left + currScroll - contWidth - activeOuterWidth;

	$('.book-list').animate( { 
		scrollLeft: left
	},'slow');
}


});