Owl Carousel拖拽或滑动时fade效果失效，如何实现拖拽淡入淡出切换？

该现象是Owl Carousel的默认设计导致：fade参数仅默认覆盖点击导航点、切换箭头的切换动画逻辑，拖拽、触摸滑动触发的切换默认走内置的位移动画逻辑，可通过以下配置修改：

• 第一步：基础参数配置，关闭默认拖拽滑动的过渡效果，开启fade相关配置

$('.owl-carousel').owlCarousel({
  items: 1, // fade模式仅支持单张展示，必须设置为1
  loop: true,
  nav: true,
  dots: true,
  // fade核心配置
  fade: true,
  animateOut: 'fadeOut',
  animateIn: 'fadeIn',
  // 拖拽相关配置，关闭默认滑动过渡
  mouseDrag: true,
  touchDrag: true,
  smartSpeed: 0,
  dragEndSpeed: 0
})

• 第二步：监听拖拽事件，手动触发fade切换

$('.owl-carousel').on('drag.owl.carousel', function(e) {
  // 阻止默认拖拽位移效果
  e.preventDefault();
}).on('dragged.owl.carousel', function(e) {
  const carousel = $(this).data('owl.carousel');
  // 根据拖拽方向触发上一张/下一张切换，自动走配置的fade动画
  if (e.relatedTarget.state.dragDirection === 'left') {
    carousel.next();
  } else if (e.relatedTarget.state.dragDirection === 'right') {
    carousel.prev();
  }
});

补充说明：如果未引入Animate.css库，可自行添加以下CSS定义fade动画，无需额外引入第三方资源：

.fadeOut {
  animation: fadeOut 0.5s ease forwards;
}
.fadeIn {
  animation: fadeIn 0.5s ease forwards;
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

内容的提问来源于stack exchange，提问作者Kirill Goryakin