Как добавить классы к элементам в Owl Carousel 2?
Моя цель - сделать так, чтобы карусель выглядела так:
Если вы не знаете, на что смотрите, есть 5 изображений / предметов, но только центральное изображение отображается в полном размере. Изображения рядом с центральным меньше, а внешние еще меньше.
Я добился этого в первой версии Owl Carousel, но он не поддерживает зацикливание, что делает этот дизайн нелепым (невозможно получить боковые изображения...).
Вот как я это сделал:
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')
}
Просто показываю вам код для 5 элементов, но я использовал некоторые условия if, чтобы он работал и для 3 и 7. active
класс просто состоит из width: 100%
и passive
один width: 80%
,
Кто-нибудь знает, как получить такой же результат в Owl Carousel 2? я использую _items
вместо $owlItems
но я не знаю, правильно ли это Здесь нет afterAction
и события / обратные вызовы, кажется, не работают, как они должны в v2.
1 ответ
Вы можете сделать это следующим образом:
$(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');
});
});
Прослушивание события по вашему выбору
Список доступных событий здесь
В демоверсии я просто добавляю большой класс к основному элементу и средний класс к предыдущему и следующему. Из этого вы можете играть с любым свойством CSS, которое вы хотите.
НОТА:
Вы также можете просто играть с классами плагинов, .active
а также .center
(или вы также можете определить свой собственный, как вы можете видеть здесь: пользовательские классы
Добавьте это в ваш файл CSS и JS.
.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
}
}
});
});