Проблема с навигационными кнопками Owl Carousel 2

Question

На странице есть два экземпляра OwlCarousel (сделано через tabs вкладки), проблема заключается в том, что Owl создает два экземпляра навигационных кнопок (хотя вызов OwlCarousel в JS файле происходит один раз). Один экземпляр кнопок работает, когда открыт первый таб, второй, когда открывается второй таб. Как сделать, чтобы одни навигационные кнопки отвечали за навигацию по двум табам в зависимости от того, какой таб сейчас активен?

JS:

$(document).ready(function(){
    $(".owl-four").owlCarousel({
        items: 1,
        nav: true,
        dots: false,
        navContainer:'#navButtons',
        navText: [$('.am-prev'), $('.am-next')],
        touchDrag: true
    });
});

Answer 1

Указывать на элементы управления нужно было через триггеры "prev.owl.carousel" и "next.owl.carousel", а не через опцию "navText". В итоге получилось так:

$sliderFour = $('.owl-four');
$(document).ready(function(){
    $sliderFour.owlCarousel({
        items: 1,
        nav: false,
        dots: false,
        touchDrag: true
    });
});

$('.am-prev').on('click', function() {
    $sliderFour.trigger('prev.owl.carousel');
});
$('.am-next').on('click', function() {
    $sliderFour.trigger('next.owl.carousel');
});

БЛОГ НА HUSL

Проблема с навигационными кнопками Owl Carousel 2

Ответы (1 шт):