jQuery 触发下一页猫头鹰轮播 2
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30824218/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Trigger next page owl carousel 2
提问by tqrecords
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:
我正在使用 Owl Carousel 2 并且我有自定义导航按钮，我打算将其用于下一个/上一个项目和下一个/上一个页面。我正在使用以下内容来触发下一项：
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.
这很好用，但我还需要触发下一页（类似于点的工作方式）。看起来有一个 slideBy 选项可用于按页面滑动，但这无济于事，因为我需要项目和页面导航。
$('#nextPage').click(function () {
// go to next page
});
回答by Rudi
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();
});
回答by Web_Fer
You could trigger clicks to next page (slider) only add option
您可以触发点击下一页（滑块）仅添加选项
slideBy: 3
.....
responsive:{
0:{
items:1,
nav:false
},
600:{
slideBy: 3,
items:3,
nav:true
},
1000:{
slideBy: 3, //Option for trigger next page to click on nav.
items:3,
nav:true,
loop:true
}
}
.....
回答by Oleg
$('#js-carousel-models').owlCarousel({
center: true,
items: 1.5,
loop:true,
margin: 0,
dots: true,
autoplay: true
});
var owl = $('#js-carousel-models');
owl.owlCarousel();
$('.owl-item').click(function() {
if( $(this).next().hasClass('center') ){
// scroll to prev
owl.trigger('prev.owl.carousel');
}
if( $(this).prev().hasClass('center') ){
// scroll to next
owl.trigger('next.owl.carousel');
}
})
