Первый вариант сделать без доп библиотек. Попробуйте использовать стандартный css3.
https://owlcarousel2.github.io/OwlCarousel2/demos/...
Второй вариант, подключить либу, которую они предлагают:
https://animate.style/
Там просто поменять значение:
animateOut: 'fadeOut'
на другое значение из либы.
У меня вот так работает:
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
responsive:{
0:{
items:1
},
600:{
items:3
},
1000:{
items:5
}
}
}).on('changed.owl.carousel', function (event) {
var currentItem = event.item.index;
setTimeout(function () {
$('.owl-carousel .item').eq(currentItem).css("background-color", "yellow");
}, 1000);
});
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>