Lyndon Johnson Lyndon Johnson - 1 year ago 82
jQuery Question

How do I add classes to items in Owl Carousel 2?

My goal is to make a carousel that looks like this:


In case you don't know what you're looking at, there are 5 images/items but only the center one is displayed in its full size. The images next to the center one are smaller, and the outer ones smaller still.

I've achieved this in the first version of Owl Carousel but it doesn't support looping, which makes this design ridiculous (can't reach the side images...).

Here's how I did it:

var owl = $("#owl-demo");

pagination: false,
lazyLoad: true,
itemsCustom: [
[0, 3],
[900, 5],
[1400, 7],
afterAction: function(el){

.removeClass('active') //what I call the center class
.removeClass('passive') //what I call the next-to-center class


.eq(this.currentItem + 2) //+ 2 is the center with 5 items


.eq(this.currentItem + 1)


.eq(this.currentItem + 3)

Just showing you the code for 5 items, but I used some if-clauses to get it working for 3 and 7 as well. The
class is just composed of
width: 100%
and the
width: 80%

Does anyone know how to get the same result in Owl Carousel 2? I'm using
instead of
but I don't know if that's correct. There is no
and the events/callbacks don't seem to work as they should in v2.

Answer Source

You can do it this way:

        center: true,

    $('.loop').on('translate.owl.carousel', function(e){
        idx = e.item.index;

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.



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