[英]Angular: ng-bootstrap - Vertical Carousel with animation
我想使用角度为 7 的 ng-bootstrap 的 Carousel,但我想在垂直而不是水平的情况下使用这个 Carousel。 我阅读了所有文档,但我不知道如何更改箭头并添加垂直幻灯片效果...
有任何想法吗?
我的代码:
登陆.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() {
}
}
登陆.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>
从源头看 ,似乎垂直旋转不是一种选择。 最好的选择是使用carousel-control-next-icon
和carousel-control-prev-icon
覆盖carousel-control-prev
和carousel-control-next
类,以居中并旋转carousel-control-prev-icon
。
这里有一些例子。
那里的示例之一如下所示:
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.