Lyndon Johnson Lyndon Johnson - 4 months ago 32
jQuery Question

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

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

Carousel

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");

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

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

this
.$owlItems

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

this
.$owlItems

.eq(this.currentItem + 1)
.addClass('passive')

this
.$owlItems

.eq(this.currentItem + 3)
.addClass('passive')
}


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
active
class is just composed of
width: 100%
and the
passive
one
width: 80%
.

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

Answer

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