Добрый день. Есть простая карусель:
<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
