我们自定义的Owl Carousel行为不符合预期-拖动并使用键盘箭头会将你带到下一张幻灯片, 而上一个和下一个箭头则将”下一个”幻灯片”跳过”到下一个幻灯片。
下一张幻灯片确实会短暂出现, 但会快速跳至下一张幻灯片。
我在main.js设置中尝试了一些操作, 但没有骰子。任何想法都将不胜感激, 因为我有些困惑。
main.js代码是:
$(document).ready(function() {
// initialise owl
$(function() {
var owl = $('.owl-carousel');
owl.owlCarousel({
items:1, lazyLoad:true, loop:true, useMouseWheel: false, nav: true, center: true, dots: false, margin: 0, stagePadding: 0, URLhashListener: true, startPosition: 'URLHash', animateIn: 'fadeIn', animateOut: 'fadeOut'
});
// click for next image
$(owl).click(function() {
owl.trigger('next.owl');
})
// add arrow keys to carousel navigation
$(document).on('keydown', function( event ) { //attach event listener
if(event.keyCode == 37) {
owl.trigger('prev.owl')
}
if(event.keyCode == 39) {
owl.trigger('next.owl')
}
});
// end arrow keys
}); // end owl
}); // end document ready
如果有帮助, 很高兴分享代码的其他任何部分。在此先感谢你的指导!
#1
通过@Tiberiuscan指向正确的方向, 我找到了解决方案:
下一个图像部分的点击以整个猫头鹰传送带为点击目标。
我修改了此代码以将owl-item div作为目标, 并解决了该问题, 如下所示:
// click for next image
$('.owl-item').click(function() {
owl.trigger('next.owl');
})
再次感谢@Tiberiuscan
评论前必须登录!
注册