我们自定义的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');
})
【Owl轮播-使用上一个/下一个跳过过去的图像】再次感谢@Tiberiuscan
推荐阅读
- WordPress中带有主题的Oxygen Builder
- 在子主题中覆盖父主题函数
- 智慧楼宇办公时代来啦！你准备好了吗（）
- 一篇超详细的vue项目前端自动化测试教学！
- 认识Java项目开发效率工具 Lombok
- prometheusblackbox_exporter
- MongoDB认证与授权
- kube-eventer事件监控
- 你会用ES6，那倒是用啊！