How do I add classes to items in Owl Carousel 2?
You can do it this way:
$(function(){
$('.loop').owlCarousel({
center: true,
items:5,
loop:true,
margin:10
});
$('.loop').on('translate.owl.carousel', function(e){
idx = e.item.index;
$('.owl-item.big').removeClass('big');
$('.owl-item.medium').removeClass('medium');
$('.owl-item').eq(idx).addClass('big');
$('.owl-item').eq(idx-1).addClass('medium');
$('.owl-item').eq(idx+1).addClass('medium');
});
});
Listening to the event of your choice
List of available events here
In the demo, I just add the class big to the main item, and the class medium to the previous and next one. From that you can play with whichever css property you want.
LIVE DEMO
NOTE:
You could also just play with plugin classes, .active
and .center
(or you can also define your own, as you can see here: custom classes