OwlCarousel 2-当触摸/鼠标拖动时，旋转木马不会按“页面”滑动
OwlCarousel 2-当触摸/鼠标拖动时，旋转木马不会按“页面”滑动
提问于 2017-02-23 23:09:04
我已经设置了我的旋转木马，这样当点击导航箭头时，我的旋转木马就会按“页面”滑动，方法是设置这个选项：slideBy: 'page'。我希望在触摸/鼠标拖动时，旋转木马也会一页一页地滑动，但它只会逐个滑动我的项目。
什么是正确的配置，使它在触摸/鼠标拖动时逐页滑动？
以下是我当前的配置：
$('.owl-carousel').owlCarousel({
loop: true,
nav: false,
navText: false,
navSpeed: 200,
dots: false,
dotsSpeed: 800,
responsive: {
0: {
items: 1,
slideBy: 'page'
},
320: {
items: 2,
slideBy: 'page'
},
768: {
items: 4,
slideBy: 'page'
},
992: {
items: 6,
slideBy: 'page'
}
},
slideBy: 'page',
lazyLoad: true
});回答 1
Stack Overflow用户
发布于 2018-01-26 08:19:25
您可以在拖动前保存当前项的索引，拖动后恢复索引，并使用Owl类中的next或prev方法。你可以在this jsfiddle中找到这个例子。
// Empty object where we can store current item's index before drag
var transient = {};
$('.owl-carousel').owlCarousel({
slideBy: 'page',
onDrag: onDrag.bind(transient),
onDragged: onDragged.bind(transient)
});
function onDrag(event) {
this.initialCurrent = event.relatedTarget.current();
}
function onDragged(event) {
var owl = event.relatedTarget;
var draggedCurrent = owl.current();
if (draggedCurrent > this.initialCurrent) {
owl.current(this.initialCurrent);
owl.next();
} else if (draggedCurrent < this.initialCurrent) {
owl.current(this.initialCurrent);
owl.prev();
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42419482
复制相关文章
相似问题
腾讯云开发者
