ethereal,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodePen - A Pen by Anakin_Sky</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css'>
<style>
.owl-item {
width: 300px;
height: 300px;
background-color: coral;
}
.a-hover {
transform: scale(0.8) !important;
}
button {
width: 40px;
height: 40px;
}
.owl-item.active{
transition: all 0.7s ease !important;
}
.owl-item.active.s-1{
background-color: #FFFF00;
}
.owl-item.active.s-2{
background-color: #FF0000;
}
.owl-item.active.s-3{
background-color: #0000FF;
}
</style>
</head>
<body translate="no">
<div class="owl-carousel owl-one">
<div> 1 </div>
<div> 2 </div>
<div> 3 </div>
<div> 4 </div>
<div> 5 </div>
<div> 6 </div>
<div> 7 </div>
<div> 8 </div>
<div> 9 </div>
<div> 10 </div>
<div> 11 </div>
<div> 12 </div>
<div> 13 </div>
<div> 14 </div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'></script>
<script>
var owl = $(".owl-one").owlCarousel({
onTranslate: function() {
$(".owl-item", owl).removeClass("s-1 s-2 s-3")
},
onTranslated: owladdClass,
onInitialized: owladdClass,
loop: true,
margin: 20,
nav: true,
loop: false,
smartSpeed: 1E3,
responsive: {
0: {
items: 3
}
}
});
function owladdClass() {
var active = $(".owl-item.active", owl);
active.eq(0).addClass("s-1");
active.eq(1).addClass("s-2");
active.eq(2).addClass("s-3")
}
owl.trigger("translated.owl.carousel");
owl.on("wheel", function(e) {
if (e.originalEvent.deltaY > 0) owl.trigger("prev.owl.carousel");
else owl.trigger("next.owl.carousel");
e.preventDefault()
});
</script>
</body>
</html>