horizontally auto scroll to active thumbnail li

by Mohamed Zalahi

HTML

<a href="#" class="next" id="right-arrow">&larr;</a>
<div class="img-cont">
  <img id="showcase-book-img" src="" />
</div>
<a href="#" 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=F" />
  </li>
  <li class="book">
    <img class="thumb" src="http://www.placehold.it/30x30&text=G" />
  </li>
</ul>

CSS

.active {
  border-bottom: 1px solid #990000;
}

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

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

.book-list .book {
  float: left;
  list-style: none;
  margin: 2px;
}

JavaScript

var totalList = $('#book-list li').length;
 $('#total-page').text(totalList);
 
$("#book-list li").click(function(e) {
  // if i use this getting undefined
  // var src = $(this).attr("src"); 
  // so i use this method
  var target = e.target;
  var src = target.src;
  console.log(src);
  $("#showcase-book-img").fadeOut(function() {
    $(this).on('load', function() {
      $(this).fadeIn();
    });

    $(this).attr("src", src);
  });
  //record which thumb was clicked
  $("#book-list li").removeClass("active"); //remove class
  $(this).addClass("active"); //apply class to selected thumb
});

//move next
$("#left-arrow").click(function() {
  if ($("#book-list li.active").next("#book-list li").length > 0) {
    $("#book-list li.active").next().children('img').trigger("click");
  } else {
    $("#book-list li:first > img").trigger("click"); //go to first
  }
  return false;
});

//move previous 
$("#right-arrow").click(function() {
  if ($("#book-list li.active").prev("#book-list li").length > 0) {
    $("#book-list li.active").prev().children('img').trigger("click");
  } else {
    $("#book-list li:last > img").trigger("click"); //go to end
  }
  return false;
});

$('#current-page').keypress(function(e) {
  var userInput = $('#current-page').val();
  if (this.value.length == 0 && e.which == 48) {
    // disable enter zero
    return false;
  } else if (e.keyCode == 13) {
    $('.book').each(function(key) {
      var numKey = key + 1;
      if (userInput == numKey) {
        // console.log(numKey + " success");
        var currentKey = userInput;
        var scrollPos = $('#book-list li:nth-child(' + currentKey + ')').children('img').trigger('click').scrollLeft();
        $('#book-list').scrollLeft(scrollPos);
        // $(window).scrollLeft($('#book-list li:nth-child('+ currentKey +').children('img').trigger('click')');    
      }
    })
    return false; // prevent the button click from happening
  }
});

//click the first thumb to begin
$("#book-list li:first...