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

Question

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

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.

Squall

Answer 1

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

Pisarik

Looks great! Will get some work to get it to work on my page, though. Do I need those theme files? I didn't get those when I downloaded Owl 2. – Squall

I don't know why they aren't in the zip package, but you can find it on github project (github.com/smashingboxes/OwlCarousel2/tree/develop/src/css). You don't absolutely need it, but i attached to style the fiddle as on the owl site demo ;) – Pisarik

this function work only single slider not in multiple . it's possible this function all slider . – Gerhard

all youre event's link's demo is deprecated please refresh your'e code @RobinLeboeuf – Hydrocele

Hi @Spectr, I see nothing deprecated here, what makes you think that ? – Pisarik

Answer 2

add this in your css and js file.

.owl-carousel.owl-drag .owl-item.center .item {
    background: rgb(25, 0, 255) ;
    transform: scale(1.1)
  }


$(document).ready(function () {

$(".owl-carousel").owlCarousel({
    center: true,
    dots: false,
    loop:true,
    responsive: {
        1900: {
            items: 7
        },
        1440: {
            items: 5
        },
        760: {
            items: 3
        },
        0: {
            items: 1
        }
    }
});

});

Sciatica