У Owl Carousel есть опция при вызове "addClassActive", которая, будучи true, добавляет класс .active к видимым в текущий момент элементам. Можешь попробовать завязаться на это
Хотя, я полагаю, если завязаться на это, то новый элемент будет появляться только после всей анимации. Но у карусели так же есть колбэки. beforeMove и afterMove. Ты можешь перед движение навешивать на враппер класс "moving", а потом его убирать. Итого у тебя получится примерно так:
$("#owl-example").owlCarousel({
addClassActive: true,
beforeMove: function() {
$(this).find('.owl-wrapper').addClass('moving');
//Возможно, есть более красивый вариант, как добраться до враппера.
//Посмотри, потыкай. Возможно, это и есть this
},
afterMove: function() {
$(this).find('.owl-wrapper').removeClass('moving');
}
})
.owl-item {
display: none;
}
.owl-item.active {
display: block;
}
.owl-wrapper {
overflow: visible;
}
.owl-wrapper.moving {
overflow: hidden;
}
.owl-wrapper.moving .owl-item {
display: block;
}
