[英]Angular: ng-bootstrap - Vertical Carousel with animation
I would like to use the ng-bootstrap's Carousel with angular 7 but I want to use this Carousel in vertical not horizontal.我想使用角度为 7 的 ng-bootstrap 的 Carousel,但我想在垂直而不是水平的情况下使用这个 Carousel。 I read all the docs but I don't know how to change the arrows and add a vertical slide effect...我阅读了所有文档,但我不知道如何更改箭头并添加垂直幻灯片效果...
Any ideas?有任何想法吗?
My code:我的代码:
landing.component.ts登陆.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登陆.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>
Looking at the source it seems like vertical rotation is not an option. 从源头看 ,似乎垂直旋转不是一种选择。 Your best bet would be to override the carousel-control-prev
and carousel-control-next
classes to center and rotate the icons with the icon classes carousel-control-next-icon
& carousel-control-prev-icon
. 最好的选择是使用carousel-control-next-icon
和carousel-control-prev-icon
覆盖carousel-control-prev
和carousel-control-next
类,以居中并旋转carousel-control-prev-icon
。
Some examples are HERE . 这里有一些例子。
One of the examples there looks like that: 那里的示例之一如下所示:
<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.