如何使Jquery滑块停止滑动？

Question

我正在尝试使用Jquery创建一个非常简单的滑块，但是我遇到了一些麻烦。 这是我的代码笔：https://codepen.io/MEr3ViNgi0/pen/BONMoM

<script>
  $(function() {
    $('#morePics').click(function() {
      $('#list-categories').css('margin-left', '-=180px');
    });
  });
  $(function() {
    $('#lessPics').click(function() {
      $('#list-categories').css('margin-left', '+=180px');
    });
  });
</script>

图片在单击箭头时左右滑动（不要介意CSS，我只是在测试Jquery），但是当不显示更多项目时如何使滑块停止？ 现在，它不断滑动。