Текущее поведение
Слайды в Bootstrap Carousel не идут, слайды идут только вертикально. в карусели мы ожидаем, что слайды будут располагаться только горизонтально, я также прикрепил скриншоты текущего поведения.
Ожидаемое поведение
Слайды в карусели должны располагаться горизонтально, как показано на снимке экрана ниже
(пример ссылки https://ng -bootstrap.github.io / # / components / carousel / examples )
Минимальное воспроизведение задачи с инструкциями
после загрузки кода по ссылке на github https://github.com/gg-gg-v1/v1_ComponentsWithSEO
запустить npm install
запустить нг служить --o
запустит в браузере
Пример репозитория
https://github.com/gg-gg-v1/v1_ComponentsWithSEO
Окружающая среда
Угловой CLI: 6.2.1
Узел: 8.11.3
ОС: win32 x64
Угловой: 6.1.7
... анимации, общие, компилятор, компилятор, ядро, формы
... http, language-service, платформа-браузер
... платформа-браузер-динамическая, платформа-сервер, маршрутизатор
slider.component.ts
import { Component, OnInit } from '@angular/core';
import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.css'],
providers: [NgbCarouselConfig] // add NgbCarouselConfig to the component providers
})
export class SliderComponent implements OnInit {
images = [1, 2, 3, 4].map(() => `https://picsum.photos/900/500?random&t=${Math.random()}`);
constructor(config: NgbCarouselConfig) {
// customize default values of carousels used by this component tree
config.interval = 10000;
config.wrap = false;
config.keyboard = false;
config.pauseOnHover = false;
}
ngOnInit() {
}
}
slider.component.html
<ngb-carousel *ngIf="images">
<ng-template ngbSlide>
<img [src]="images[0]" alt="Random first slide">
<div class="carousel-caption">
<h3>10 seconds between slides...</h3>
<p>This carousel uses customized default values.</p>
</div>
</ng-template>
<ng-template ngbSlide>
<img [src]="images[1]" alt="Random second slide">
<div class="carousel-caption">
<h3>No mouse events...</h3>
<p>This carousel doesn't pause or resume on mouse events</p>
</div>
</ng-template>
<ng-template ngbSlide>
<img [src]="images[2]" alt="Random third slide">
<div class="carousel-caption">
<h3>No keyboard...</h3>
<p>This carousel uses customized default values.</p>
</div>
</ng-template>
<ng-template ngbSlide>
<img [src]="images[3]" alt="Random fourth slide">
<div class="carousel-caption">
<h3>And no wrap after last slide.</h3>
<p>This carousel uses customized default values.</p>
</div>
</ng-template>
</ngb-carousel>