Как правильно использовать bootstrap карусель с Angular - PullRequest
Новая
       10

Как правильно использовать bootstrap карусель с Angular

0 голосов
/ 16 января 2020

Есть много вопросов по stackoveflow. Я прошел через некоторые из них:

  1. Как реализовать bootstrap corousel с angular ng-repeat?
  2. Как используйте карусель с Angular: 9 месяцев, без ответа.
  3. Слайды в Bootstrap Карусель не ... только : 1+ год, без правильного ответа

Тогда я попробовал следующую статью:

  1. Как использовать bootstrap 4 карусель в angular 5 | 6 и многие другие.

Мой код работает неправильно. Мои изображения накладываются друг на друга без анимации. Нет ошибок или предупреждений на консоли.

Вот мой код: carousel.component. html

<div class='container-fluid'>
  <div class='col-12'>
    <ngb-carousel>
      <ng-template ngbSlide>
        <img src="https://content.duckduckgo.com/iu/?u=https%3A%" 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>
         OTHER 4-5 slides
      </ng-template> 
    </ngb-carousel>
  </div>
</div>

carousel.component.ts 

import { Component, OnInit } from '@angular/core';
import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';

@Component({
  ...
  providers: [ NgbCarouselConfig ]
})
export class CarouselComponent implements OnInit {

  constructor(config: NgbCarouselConfig) {
    config.interval = 2000;
    config.wrap = true;
    config.keyboard = false;
    config.pauseOnHover = false;
  }

  ngOnInit() {
  }
}

app.module.ts 

import { ... } from '@angular/core';
...
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  imports:      [ BrowserModule, FormsModule, NgbModule ],
  ...
})
export class AppModule { }

Просмотр моего кода таким способом может быть очень болезненным. Итак, вот stackblitz . А вот снимок экрана (уменьшенный до 30% для размещения всего на одном изображении): enter image description here

Пожалуйста, помогите мне.

Прямо сейчас я звоню изображения из inte rnet, но позже я буду хранить изображения локально в моей папке assets / images .

И bootstrap не сложно и быстро. Пожалуйста, не стесняйтесь предложить и другие варианты.

Ответы [ 2 ]

0 голосов
/ 16 января 2020

Вы забыли стили:) 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

Но лучше сохранить этот стиль локально и добавить его в angular. json

"styles": [
  "src/styles.css",
  "src/bootstrap.min.css"
],
0 голосов
/ 16 января 2020

Ваша проблема в том, что вы не инициализировали модуль карусели в файле app.module, поэтому приложение не знает, что такое карусель.

вам нужно будет добавить следующий модуль в ваши глобальные объявления 

import { NgbdCarouselBasic } from './carousel-basic';
@NgModule({
  imports: [BrowserModule, NgbModule],
  declarations: [NgbdCarouselBasic],
  exports: [NgbdCarouselBasic],
  bootstrap: [NgbdCarouselBasic]
})
...