Карусель без скачков
 

Добрый день. Есть простая карусель:

<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var $ = jQuery;
(function($, undefined) {
	function jCarousel(obj, block, li) {
		$(obj).parents().find(block + ' ' + li).stop(true, true);
		if ($(obj).hasClass('carousel-arrow__prev')) {
			liLast = $(obj).parents().find(block + ' ' + li + ':last');
			liLast.prependTo(liLast.parent()).css('margin-left', '-' + liLast.width() + 'px').animate({
				marginLeft: 0
			});
		} else {
			liFirst = $(obj).parents().find(block + ' ' + li + ':eq(0)');
			liFirst.animate({
				marginLeft: 0 - liFirst.width()
			}, function() {
				liFirst.css('margin-left', 0).appendTo(liFirst.parent());
			});
		}
	}
	$(document).on('click', '.carousel-arrow__prev, .carousel-arrow__next', function(e) {
		jCarousel(this,'.carousel-box','.carousel-box__item');
	});
})(jQuery);
</script>
<div class="carousel">
	<ul class="carousel-box">
		<li class="carousel-box__item"><img src="https://placehold.jp/250x250.png?text=one"><span class="carousel-box__item_desc">One</span></li>
		<li class="carousel-box__item"><img src="https://placehold.jp/250x250.png?text=two"><span class="carousel-box__item_desc">Two</span></li>
		<li class="carousel-box__item"><img src="https://placehold.jp/250x250.png?text=three"><span class="carousel-box__item_desc">Three</span></li>
		<li class="carousel-box__item"><img src="https://placehold.jp/250x250.png?text=four"><span class="carousel-box__item_desc">Four</span></li>
		<li class="carousel-box__item"><img src="https://placehold.jp/250x250.png?text=five"><span class="carousel-box__item_desc">Five</span></li>
		<li class="carousel-box__item"><img src="https://placehold.jp/250x250.png?text=six"><span class="carousel-box__item_desc">Six</span></li>
		<li class="carousel-box__item"><img src="https://placehold.jp/250x250.png?text=seven"><span class="carousel-box__item_desc">Seven</span></li>
	</ul>
	<div class="carousel-arrow">
		<span class="carousel-arrow__prev"><</span>
		<span class="carousel-arrow__next">></span>
	</div>
</div>
<style>
.carousel {
	position: relative;
	padding: 0 50px;
	height: 170px;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}
.carousel-box {
	position: relative;
	height: 170px;
	width: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
.carousel-box__item {
	display: inline-block;
	vertical-align: top;
	white-space: normal;
	float: left;
	position: relative;
	width: 25%;
	margin-bottom: 20px;
	text-align: center;
}
.carousel-box__item img{
	width: 100%;
}
.carousel-box__item_desc {
	display: block;
	font-weight: 700;
	line-height: 24px;
	font-size: 18px;
	color: #3399cc;
	text-decoration: none;
}
.carousel-arrow{
	
}
.carousel-arrow__prev, .carousel-arrow__next {
	position: absolute;
	top: 0;
	bottom: 0;
	cursor: pointer;
	margin: auto;
	width: 50px;
	height: 50px;
	background-color: #f1f1f1;
	border-radius: 100%;
	line-height: 50px;
	text-align: center;
}
.carousel-arrow__prev {
	left: 0;
}
.carousel-arrow__next {
	right: 0;
}
</style>

Работает. Уже хорошо. При клике на стрелки вправо-влево мне не нравится действие последнего элемента. Если кликаю на левую стрелку, резко исчезает последний элемент и блоки смещаются на 1. Если кликаю на правую стрелку, сначала блоки плавно смещаются, а затем резко появляется элемент.
Необходимо, чтобы не было резких исчезновений, а всё вместе плавно перемещалось.
Я понимаю, что причина скорее в вёрстке.
Вот пример: https://codepen.io/codyshop/pen/wLOooM