I would like to use the ng-bootstrap's Carousel with angular 7 but I want to use this Carousel in vertical not horizontal. 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
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>
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
.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.