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

Question

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.

score 14 · Accepted Answer · edited Mar 17 '19 at 18:55

14

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

edited Mar 17 '19 at 18:55

andreivictor

4,883
2
31
52

answered Mar 06 '15 at 16:55

Robin Leboeuf

2,026
1
11
14

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. – Mar 06 '15 at 17:22
I don't know why they aren't in the zip package, but you can find it on github project (https://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 ;) – Robin Leboeuf Mar 06 '15 at 17:25
this function work only single slider not in multiple . it's possible this function all slider . – lalit bhakuni Mar 06 '18 at 06:34
2

all youre event's link's demo is deprecated please refresh your'e code @RobinLeboeuf – Spectr Jul 26 '18 at 10:36
Hi @Spectr, I see nothing deprecated here, what makes you think that ? – Robin Leboeuf Oct 20 '20 at 15:39

score 0 · Answer 2 · edited Jan 31 '19 at 10:31

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

});

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

2 Answers2

Linked

Related