在 ngx-bootstrap 中为 Angular 5 滑动带有动画的图像

Question

我正在使用 ngx-bootstrap carousel 在主页中滑动图像。如何用动画滑动图像？

Answer 1

为了创建滑动动画，我想出了下一个解决方案

在主要styles.scss添加

carousel.slide-animated {
  slide.item {
    animation-duration: 1s;
    animation-fill-mode: both;
    &.active {
      width: 100%;
      animation-name: carouselSlideIn;
    }
    &:not(.active) {
      display: table-cell;
      animation-name: carouselSlideOut;
    }
  }
}

@keyframes carouselSlideIn {
  0% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}
@keyframes carouselSlideOut {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

您可以在组件中使用它，例如：

<carousel class="slide-animated">
  <slide><img src="slide1.jpg"/></slide>
  <slide><img src="slide2.jpg"/></slide>
  <slide><img src="slide3.jpg"/></slide>
</carousel>

PS：剩下的一个问题是，无论您按哪个箭头，幻灯片总是从右向左移动。当/如果我解决这个问题时，我会更新答案