猫头鹰旋转木马2 -触摸自定义动画

Owl carousel 2 - custom animation on touch

本文关键字：自定义 动画 触摸 旋转木马 猫头鹰      更新时间：2023-09-26

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

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

$('.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没有影响

我的解决方案可能不是理想的，但像这样的东西可能会起作用:

$(".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");
  }
});

因此，我们绑定到onDragged事件，并简单地隐藏和淡入整个旋转木马。请进行测试以确保它没有bug，但这可能对您来说是一种权宜之计(这不是最好的方法，因为它可能只是掩盖了潜在的转换，如果您快速浏览，您可能会注意到这一点)。

相关文章：