我想使用 Angular 为 7 的 ng-bootstrap 旋转木马,但我想在垂直而非水平方向上使用此旋转木马。我阅读了所有文档,但我不知道如何更改箭头和添加垂直滑动效果...
有什么想法吗?
我的代码:
登陆.component.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() {
}
}
landing.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>
最佳答案
查看 source似乎垂直旋转不是一种选择。您最好的选择是重写 carousel-control-prev
和 carousel-control-next
类以使用图标类 carousel-control 居中和旋转图标-下一个图标
& carousel-control-prev-icon
。
关于css - Angular:ng-bootstrap - 带动画的垂直旋转木马,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55892559/