您可以这样做:

$(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');
    });
}); 

收听您选择的事件

> 此处的可用事件列表

在演示中，我仅将 big 类添加到主要项目，并将 medium 类添加至上一个和下一个.由此，您可以使用所需的任何CSS属性.

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.

实时演示

注意:

您还可以只使用插件类.active和.center(或者您也可以定义自己的类，如您在此处看到的:

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