Есть owl carousel, в которой используется свойство stagePadding для видимости кусочков элементов. Как сделать так, чтобы помимо переключателей next|prev, карусель переключалась также при клике на выступы элементов справа и слева соответственно? переходите по фидлу - поймете
$('.owl-carousel').owlCarousel({
stagePadding: 100,
loop: true,
margin: 10,
nav: true,
autoplay: true,
autoplayTimeout: 2000,
autoplayHoverPause: true,
responsive: {
0: {
items: 1
},
470: {
items: 3
},
768: {
items: 4
},
1199: {
items: 5
}
}
});
$('.owl-carousel').find('.owl-item.active').prev(':not(.active)').css('background-color', 'red');
$('.owl-carousel').find('.owl-item.active').next(':not(.active)').css('background-color', 'red');
.owl-carousel .item {
height: 10rem;
background: #4DC7A0;
padding: 1rem;
}
1
2
3
4
5
6
7
8
9
10
11
12
Ответ
Согласно документации нужно добавить кнопки по такому принципу:
// Go to the next item
$('.customNextBtn').click(function() {
owl.trigger('next.owl.carousel');
})
// Go to the previous item
$('.customPrevBtn').click(function() {
// With optional speed parameter
// Parameters has to be in square bracket '[]'
owl.trigger('prev.owl.carousel', [300]);
})
Итоговое решение - здесь
Комментариев нет:
Отправить комментарий