Гладкий слайдер - ошибка бесконечного цикла перехода CSS ⇐ CSS

[Anonymous]

Я настроил слайдер с помощью Slick Slider. При использовании кнопок «Далее» и «Предыдущий» элемент отображается с красивым переходом. Проблема, с которой я столкнулся, заключается в том, что когда он перезапускает свой цикл, первый элемент «защелкивается» в поле зрения вместо того, чтобы выполнять переход. Кроме того, похоже, что он теряет внутреннюю индексацию, поскольку изменяются классы «нечетный» и «четный» CSS. См. фрагмент ниже:

Код: Выделить всё

$(document).ready(function() {
$('.items').slick({
slidesToShow: 2,
speed: 500
});
});

Код: Выделить всё

* {
margin: 0;
padding: 0;
}

ul {
list-style: none;
height: 150px;
}

.slick-list, .slick-track {
height: 100%;
}

ul li {
width: 350px;
height: 100%;
}

ul li .content {
width: 100%;
height: 100%;
transition: transform 0.5s linear;
text-align: center;
}

ul li .content span {
color: #fff;
font-size: 50px;
font-family: Arial;
position: relative;
top: 50%;
transform: translateY(-50%);
display: block;
}

ul li:nth-child(odd) .content {
background-color: red;
}

ul li:nth-child(even) .content {
background-color: green;
}

ul li:not(.slick-current) .content {
transform: scale(0.9);
}

Код: Выделить всё

[*]


[list]


1

[*]

2

[*]

3

[*]

4

[*]

5

[/list]

Думаю, я знаю, почему он это делает: потому что для работы функции бесконечного цикла необходимо создавать «клонированные» элементы. Я попробовал несколько разных плагинов для слайдеров, и все они имеют схожие проблемы.

Кто-нибудь знает, как я могу это исправить? jsfiddle здесь: https://jsfiddle.net/7kdmwkd9/1/

Подробнее здесь: https://stackoverflow.com/questions/454 ... e-loop-bug