Làm cách nào để thêm lớp học vào các mục trong Owl Carousel 2?

Question

Mục tiêu của tôi là để thực hiện một băng chuyền trông như thế này:

Trong trường hợp bạn không biết những gì bạn đang tìm kiếm, có 5 images/mặt hàng nhưng chỉ có một trung tâm được hiển thị ở kích thước đầy đủ của nó. Những hình ảnh bên cạnh trung tâm một nhỏ hơn, và những hình ảnh bên ngoài nhỏ hơn.

Tôi đã đạt được điều này trong phiên bản đầu tiên của Owl Carousel nhưng nó không hỗ trợ looping, làm cho thiết kế này vô lý (không thể tiếp cận với hình ảnh bên ...).

Đây là cách tôi đã làm nó:

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

Chỉ hiển thị cho bạn mã cho 5 mặt hàng, nhưng tôi đã sử dụng một số if-khoản để có được nó làm việc cho 3 và 7 là tốt. Lớp học active chỉ bao gồm width: 100% và passive một width: 80%.

Có ai biết cách nhận kết quả tương tự trong Owl Carousel 2 không? Tôi đang sử dụng _items thay vì $owlItems nhưng tôi không biết điều đó có đúng không. Không có afterAction và các sự kiện/callbacks dường như không hoạt động như trong v2.

Answer 1

Bạn có thể làm theo cách này:

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

Lắng nghe sự kiện của sự lựa chọn của bạn

List of available events here

Trong bản demo, tôi chỉ cần thêm lớp lớn đến mục chính và lớp phương tiện trước và sau. Từ đó bạn có thể chơi với bất kỳ tài sản css nào bạn muốn.

LIVE DEMO

---

LƯU Ý:

Bạn cũng có thể chỉ chơi với các lớp plugin, .active và .center (hoặc bạn cũng có thể định nghĩa riêng của bạn, như bạn thấy ở đây: custom classes