[英]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.