how can i use event in owl-carousel - php

Question

I have three sliders in my webpage. I wrote an event for my second slider. but it gives this event to the first one. How can i give this event to the second one?
$('#owl-three').on('.initialized.owl.carousel translate.owl.carousel', function(e){
idx = e.item.index;
$('.owl-item.big').removeClass('big');
$('.owl-item.medium').removeClass('medium');
$('.owl-item.dir').removeClass('dir');
$('.owl-item.small').removeClass('small');
$('.owl-item').eq(idx+3).addClass('medium');
$('.owl-item').eq(idx+1).addClass('medium');
$('.owl-item').eq(idx+2).addClass('big');
$('.owl-item').eq(idx).addClass('small');
$('.owl-item').eq(idx+4).addClass('small');
$('.owl-item').eq(idx+4).addClass('dir');
});

Answer 1

Make your html like this
<div class="owl-carousel owl-theme" id="#owl-three">
<div class="item" data-dot="1"><h4>1</h4></div>
<div class="item" data-dot="2"><h4>2</h4></div>
<div class="item" data-dot="3"><h4>3</h4></div>
</div>
And use this script In this script you can do any thing as per desired slide by adding if condition I already add if condition for slide 2 you can write anything under that condition for slide 2
$('#owl-three').on('changed.owl.carousel', function(event) {
var currentSlide = $('div.active').find('.item').data('dot');
if(currentSlide == 2) {
}
});