Infinite loop in slider with css transition
<p>I'm working on a particular type of slider on mobile devices.
The idea is to only exploit the css animations to perform the movements.
So, I detect the position of the finger through the "touchmove" event and through a particular function I determine the position.
Now, the point of the matter is that between the first number and the last, the animation seems to be malfunctioning.
The prevAll and nextAll functions works properly but not for first and last number.
I don't know how to make an infinite loop without changing direction.
Can someone help me?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var
  isMobile = function() {
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
      return true;
    else
      return false;
  },
  _child = $('ul'),
  human = false,
  saved = 1,
  _check = function(int) {
    _child.find('li').removeClass('selected before after');
    _child.find('li[value=' + int + ']').addClass('selected');
    _child.find('li.selected').nextAll('li').addClass('after');
    _child.find('li.selected').prevAll('li').addClass('before');
  },
  _m = function(n) {
    if (n &gt; 10) {
      return _m(n - 10);
    } else if (n &lt; 1) {
      return _m(n + 10);
    } else
      return n;
  };

_child.on('mousedown touchstart', function(e) {
  init = isMobile() ? e.originalEvent.touches[0].pageY : e.pageY;
  human = true;
});
$(document).on('mousemove touchmove', function(e) {
  e.preventDefault();
  if (human) {
    var
      _current = isMobile() ? e.originalEvent.touches[0].pageY : e.pageY;

    _current = init - _current;
    _current = Math.round(_current * .03);
    _current = saved + _current;

    var
      int = _m(_current);

    _check(int);

    $(this).on('mouseup touchend', function() {
      saved = _current;
      human = false;
    });
  }
});

_child.find('li[value=' + saved + ']').addClass('selected');
_check(saved);</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  margin: 0;
  background: #FCFCFC;
  color: #222;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  width: 200px;
  height: 200px;
  background: #FFF;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 0 32px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 200px;
  text-align: center;
  font-size: 72px;
  opacity: .5;
  transition: all .4s ease
}
li.after {
  transform: translateY(100%);
}
li.before {
  transform: translateY(-100%);
}
li.selected {
  opacity: 1;
  transform: translateY(0);
  z-index: 1;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;ul&gt;
  &lt;li value="1" class="selected"&gt;1&lt;/li&gt;
  &lt;li value="2"&gt;2&lt;/li&gt;
  &lt;li value="3"&gt;3&lt;/li&gt;
  &lt;li value="4"&gt;4&lt;/li&gt;
  &lt;li value="5"&gt;5&lt;/li&gt;
  &lt;li value="6"&gt;6&lt;/li&gt;
  &lt;li value="7"&gt;7&lt;/li&gt;
  &lt;li value="8"&gt;8&lt;/li&gt;
  &lt;li value="9"&gt;9&lt;/li&gt;
  &lt;li value="10"&gt;10&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>