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

所以我们配合onDragged事件，只需隐藏和淡入整个旋转木马。做测试以确保它没有错误，但这可能对你有用，作为一种止损解决方案（它不是最好的方式，因为它可能只是掩盖了潜在的过渡，这是你可能会注意到的事情，如果你快速浏览了一下。）

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

1 个答案: