laimas,
ок! не очень понимаю ваши обьяснения, но был неправ,
event.item.index использовать можно.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.green.css" />
<style type="text/css">
.owl-carousel .item {
height: 10rem;
background-color: #4DC7A0;
padding: 1rem;
position:relative;
}
.owl-carousel .owl-prev{
position:absolute;
top:0; left:0;
display:block;
height:99%;
width:90px;
background-color: #FF00FF;
}
.owl-carousel .owl-next{
position:absolute;
top:0; right:0;
display:block;
height:99%;
width:90px;
background-color: #FF00FF;
}
.prev:after, .next:after{
content: attr(class);
}
.prev,.next{
display: inline-block;
}
.red .item{
background-color: #FF0000;
}
</style>
<title>Owl Carousel 2.1.0 Responsive by Geyan</title>
<script>
$(function() {
$(".owl-carousel").owlCarousel({
items: 3,
nav: true,
navText: ['<img src="/left.png" alt="" />', '<img src="/right.png" alt="" />'],
dots: false
}).on("translated.owl.carousel", setCls);
function setCls(event) {
var num = event && event.item ? event.item.index + 1 : 1 ;
$(".owl-item").removeClass("red").eq(num).addClass("red")
}
setCls()
});
</script>
</head>
<body>
<div class="owl-carousel">
<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>
</body>
</html>