scrollLeft slider jquery

$("#slider").scroll(function() {
  var scrollLeft = $(this).scrollLeft();
  if (scrollLeft > 100) {
    $(this).animate({
      scrollLeft: 300
    }, 300);
  }
})

#slider {
  width: 300px;
  height: 200px;
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
}

.item {
  width: 100%;
  height: 100%;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider">
  <div class="item" style="background: url(https://c.pxhere.com/images/0a/e1/55810a1238569b55f2a543851fc8-1640962.jpg!s);"></div>
  <div class="item" style="background: url(https://html5css.ru/css/img_forest.jpg);"></div>
</div>