javascript - Owl Carousel 2 - 自定义触摸动画

Question

是否可以为移动设备使用自定义动画选项？

我已将选项 animateIn 和 animateOut 与 fadeIn 和 fadeOut 一起使用。 这效果很好，轮播在自动播放时使用此效果，但如果我尝试滑动幻灯片，此动画将被禁用，并且轮播会像默认动画一样滑动。

$('.carousel').owlCarousel({
    mouseDrag:false,
    touchDrag:true,
    loop:true,
    animateOut: 'fadeOut',
    animateIn: 'fadeIn',
    autoplay:true,
    margin:0,
    nav:true,
    dots:false,
    navText: ['',''],
    responsive: {
        0:{
            items:1
        }, 
        600: {
            items:1
        }, 
        1000: {
            items:1
        }
    }
});

看起来动画选项对 touchdrag 没有效果。

Answer 1

我的解决方案可能并不理想，但类似于 this可能有效:

$(".carousel").owlCarousel({
  mouseDrag: false,
  touchDrag: true,
  loop: true,
  animateOut: "fadeOut",
  animateIn: "fadeIn",
  autoplay: true,
  margin: 0,
  nav: true,
  dots: false,
  navText: ["", ""],
  responsive: {
    0: {
      items: 1
    },
    600: {
      items: 1
    },
    1000: {
      items: 1
    }
  },
  onDragged: function(e) {
    $(e.target).hide().fadeIn("slow");
  }
});

因此，我们绑定(bind)到 onDragged 事件并简单地隐藏和淡入整个轮播。进行测试以确保它没有错误，但这可能作为一种权宜之计对您有用(这不是最好的方法，因为它可能只是掩盖了底层转换，如果您轻弹，您可能会注意到这一点很快就通过了)。