Change Image by select li or by arrows

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>
<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>
</ul>

CSS

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

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

.book-list {
  display: inline;
}

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

JavaScript

$("#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().trigger("click");
  } else {
    $("#book-list li:first").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().trigger("click");
  } else {
    $("#book-list li:last").trigger("click"); //go to end
  }
  return false;
});

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