simple gallery scrollable list

scrollable list images

HTML

<div class="thumbnails">
<div class="gallery-wrapper">
  <ul class="gallery">
    <li>
      <img src="https://geographyofrussia.com/wp-content/uploads/2009/03/11160328-500x375.jpg" alt="photo">
    </li>
    <li>
      <img src="http://openmonte.com/uploads/images/00/06/81/2015/08/17/b7624d.jpg" alt="photo">
    </li>
    <li>
      <img src="http://ladyelena.ru/wp-content/uploads/2017/12/k-chemu-snyatsya-gory-1.jpg" alt="photo">
    </li>
    <li>
      <img src="https://womanadvice.ru/sites/default/files/49/gory_chernogorii.jpg" alt="photo">
    </li>
    <li>
      <img src="http://veters.kz/wp-content/uploads/2018/05/img1439-e1526448611734.jpg" alt="photo">
    </li>
    <li>
      <img src="https://www.ubackground.com/_ph/17/110034736.jpg" alt="photo">
    </li>
    <li>
      <img src="https://cdn-images-1.medium.com/max/2600/0*cGDKbUrA_8vJC4d3" alt="photo">
    </li>
  </ul>
</div>
  <div class="gallery-nav gallery-left">&lt;</div>
  <div class="gallery-nav gallery-right">&gt;</div>
</div>

CSS

*{box-sizing: bor-der-box; margin: 0; padding: 0;}
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  color: #fff;
}
.thumbnails{position: relative;}
.gallery-wrapper{height: 100px; padding: 20px 0; overflow: hidden; overflow-x: auto;}
.gallery{list-style: none; width: 9999px;}
.gallery li{float: left; margin-right: 2px;}
.gallery li:last-child{margin-right: 0;}
.gallery img{height: 100px;}
.gallery-nav{background: rgba(0, 0, 0, .5); cursor: pointer; line-height: 40px; position: absolute; height: 40px; margin-top: -20px; text-align: center; top: 50%; width: 40px;}
.gallery-left{display: none; left: 0;}
.gallery-right{right: 0;}

JavaScript

var gallerySumWidth = 0,
      thumbnailsWidth = $('.thumbnails').width(),
      thumbnailsWidthOut = parseInt(thumbnailsWidth) - 40;
  $('.gallery li').each(function(){
   gallerySumWidth += 1*$(this).outerWidth(true);
  });
  // console.log(gallerySumWidth, thumbnailsWidth, thumbnailsWidthOut);
  $('.gallery').width(gallerySumWidth);
  if (gallerySumWidth < thumbnailsWidthOut ) {
    $('.gallery-right').hide();
  }

  function galleryNavigation(){
    $(".gallery-wrapper").scroll(function(){
      var galleryScrollLeft = $(".gallery-wrapper").scrollLeft(),
          galleryContainer = $(".gallery").width(),
          galleryList = $(".thumbnails").width(),
          galleryMaxLeft = parseInt(galleryContainer) - parseInt(galleryList),
          gallerySumLR = galleryScrollLeft - galleryMaxLeft;
      if (galleryScrollLeft === 0) {
        $('.gallery-left').fadeOut(200);
      } else{$('.gallery-left').fadeIn(200);}
      if (galleryScrollLeft === galleryMaxLeft || gallerySumLR >= 1) {
        $('.gallery-right').fadeOut(200);
      } else{$('.gallery-right').fadeIn(200);}
      // console.log("scrollLeft = " + galleryScrollLeft, galleryMaxLeft, gallerySumLR);
    });
  }
  galleryNavigation();

  $(".gallery-right").on('click', function(){
    $(".gallery-wrapper").animate( { scrollLeft: '+=400' }, 400);
  });
  $(".gallery-left").on('click', function(){
    $(".gallery-wrapper").animate( { scrollLeft: '-=400' }, 400);
  });