求推荐自带动画的Angular 2垂直轮播插件，适配不同高度幻灯片

我来分享几个亲测好用、自带动画效果的Angular垂直轮播插件，顺便给你解决之前遇到的幻灯片高度适配问题：

1. ngx-owl-carousel-o #

这是Owl Carousel的官方Angular封装版本，对垂直模式支持很完善，自带淡入淡出、滑动等多种动画效果，核心是它的autoHeight配置可以完美解决不同高度幻灯片的适配问题。

配置示例：

import { OwlOptions } from 'ngx-owl-carousel-o';

customOptions: OwlOptions = {
  loop: true,
  mouseDrag: true,
  touchDrag: true,
  pullDrag: true,
  dots: true,
  navSpeed: 700,
  navText: ['', ''],
  responsive: {
    0: {
      items: 1
    }
  },
  nav: true,
  vertical: true, // 开启垂直模式
  autoHeight: true // 自动适配当前幻灯片高度
}

模板里直接使用组件即可，它会自动根据当前激活的幻灯片高度调整容器高度，动画也完全内置，不需要额外写CSS。

2. ngx-slick-carousel #

基于知名的Slick Carousel封装，支持垂直轮播，自带滑动、淡入等动画，同样有adaptiveHeight配置来处理高度适配问题，社区文档也很完善，遇到问题容易找到解决方案。

配置示例：

import { SlickCarouselModule } from 'ngx-slick-carousel';

// 组件内配置
slideConfig = {
  "vertical": true,
  "adaptiveHeight": true,
  "slidesToShow": 1,
  "slidesToScroll": 1,
  "autoplay": true,
  "autoplaySpeed": 2000,
  "fade": true // 可选淡入动画
};

3. 基于Ng-Bootstrap的自定义垂直轮播 #

如果你的项目已经在用Ng-Bootstrap，其实可以把它默认的水平轮播改成垂直模式，自带的动画也能轻松适配，同时它会自动根据当前幻灯片高度调整容器。

只需要添加一点自定义CSS：

.carousel {
  height: auto;
}
.carousel-inner {
  flex-direction: column;
}
.carousel-item {
  transition: transform 0.6s ease-in-out;
}
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}
.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
  transform: translateY(100%);
}
.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {
  transform: translateY(-100%);
}
.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  transform: none;
}

这样就能把Ng-Bootstrap的Carousel改成垂直模式，自带的切换动画也会变成垂直方向，同时容器高度会自动适配当前幻灯片。

针对你之前用ng-angular carousel遇到的高度问题的临时修复 #

如果暂时不想换插件，可以尝试手动监听幻灯片切换事件，动态设置轮播容器的高度：

import { ViewChild, ElementRef } from '@angular/core';

@ViewChild('carouselContainer') carouselContainer: ElementRef;
@ViewChild('activeSlide') activeSlide: ElementRef;

onSlideChange() {
  setTimeout(() => {
    const slideHeight = this.activeSlide.nativeElement.offsetHeight;
    this.carouselContainer.nativeElement.style.height = `${slideHeight}px`;
  }, 100); // 给动画留一点缓冲时间
}

模板里给容器和当前激活的幻灯片加上对应的模板引用变量即可。

内容的提问来源于stack exchange，提问作者Uģis Meržvinskis