Infinite loop in slider with css transition

Question

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?

 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 > 10) { return _m(n - 10); } else if (n < 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); 

 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; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li value="1" class="selected">1</li> <li value="2">2</li> <li value="3">3</li> <li value="4">4</li> <li value="5">5</li> <li value="6">6</li> <li value="7">7</li> <li value="8">8</li> <li value="9">9</li> <li value="10">10</li> </ul> 

Answer 1

Tried to create working example but i don't have enough time. When you reach last li, just take one from top, append it at the end of the list, and remove first one. Something like this:

var cloneLi = $(_child.find('li')[0]).clone()
_child.append(cloneLi);
$(_child.find('li')[0]).remove()