时间戳

首页 > 解决方案 > Angular: ng-bootstrap - 带有动画的垂直轮播

css - Angular: ng-bootstrap - 带有动画的垂直轮播

问题描述

我想使用角度为 7 的 ng-bootstrap 的 Carousel，但我想在垂直而不是水平的情况下使用这个 Carousel。我阅读了所有文档，但我不知道如何更改箭头并添加垂直幻灯片效果...

有任何想法吗？

我的代码：

登陆组件.ts

import { Component, OnInit } from '@angular/core';
import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-landing',
  templateUrl: './landing.component.html',
  styleUrls: ['./landing.component.scss'],
  providers: [NgbCarouselConfig]  // add NgbCarouselConfig to the component providers
})
export class LandingComponent implements OnInit {

  constructor(config: NgbCarouselConfig) {
    // customize default values of carousels used by this component tree
    config.interval = 10000;
    config.wrap = true;
    config.keyboard = true;
    config.pauseOnHover = true;
    config.showNavigationArrows = true;
    config.showNavigationIndicators = false;
  }

  ngOnInit() {
  }
}

登陆.component.html

<ngb-carousel>
  <ng-template ngbSlide>
    slide 1
  </ng-template>
  <ng-template ngbSlide>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam modi fugit similique architecto ipsam quia dignissimos ea veritatis expedita non deleniti culpa saepe maiores ad repellat quibusdam, minus, consequuntur magni!
  </ng-template>
  <ng-template ngbSlide>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos, doloribus at tempora eligendi ipsam rerum id ab aspernatur iusto ducimus ratione consectetur corporis soluta dolor assumenda facere neque natus laboriosam!
  </ng-template>
</ngb-carousel>

标签： cssangulartypescriptcarouselng-bootstrap

解决方案

从源头看来，垂直旋转似乎不是一种选择。您最好的选择是覆盖carousel-control-prevandcarousel-control-next类以使用图标类carousel-control-next-icon&来居中和旋转图标carousel-control-prev-icon。

推荐阅读