title: Infinite loop in slider with css transition
body: <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>