I'm using Owl Carousel 2 and I have custom nav buttons that I intend to use for next/prev item and next/prev page. I'm using the following to trigger the next item:
var slider = $('.owl-carousel');
$('#nextItem').click(function () {
slider.trigger('next.owl.carousel');
});
That works fine, but I also need to trigger the next page (similar to how the dots work). It looks like there is a slideBy option that you can use to slide by a page, but this won't help since I need both item and page navigation.
$('#nextPage').click(function () {
// go to next page
});
You could trigger clicks on the dots:
// Go to page 3
$('.owl-dot:nth(2)').trigger('click');
To go to the next page or to the first if you're on the last, you can do it like this:
var $dots = $('.owl-dot');
function goToNextCarouselPage() {
var $next = $dots.filter('.active').next();
if (!$next.length)
$next = $dots.first();
$next.trigger('click');
}
$('.something-else').click(function () {
goToNextCarouselPage();
});