无法在 ngx-bootstrap 的多幻灯片轮播中呈现图像

Question

所以我正在使用 ngx-bootstrap。当我使用单图像轮播时，它工作得很好，但在多图像中，我得到的只是左边的第一张图像，没有别的。

<p>
  If `true` - carousel indicators indicate slides chunks works ONLY if singleSlideOffset = FALSE
</p>
<carousel [itemsPerSlide]="itemsPerSlide"
          [singleSlideOffset]="false"
          [interval]="false"
          [indicatorsByChunk]="true">
  <slide *ngFor="let slide of slides; let index=index">
    <img [src]="slide.image" alt="image slide" style="display: block; width: 100%;">
    <div class="carousel-caption">
      <h4>Slide {{index}}</h4>
    </div>
  </slide>
</carousel>

下面是angular代码

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {  itemsPerSlide = 3;
  singleSlideOffset = false;
  noWrap = false;


  slides = [
    {image: 'https://images-na.ssl-images-amazon.com/images/I/81GfZasnt9L._SL1371_.jpg'},
    {image: 'https://images-na.ssl-images-amazon.com/images/I/81GfZasnt9L._SL1371_.jpg'},
    {image: 'https://images-na.ssl-images-amazon.com/images/I/81GfZasnt9L._SL1371_.jpg'},
    {image: 'https://images-na.ssl-images-amazon.com/images/I/81GfZasnt9L._SL1371_.jpg'},
    {image: 'https://images-na.ssl-images-amazon.com/images/I/81GfZasnt9L._SL1371_.jpg'},
    {image: 'https://images-na.ssl-images-amazon.com/images/I/81GfZasnt9L._SL1371_.jpg'},
    {image: 'https://images-na.ssl-images-amazon.com/images/I/81GfZasnt9L._SL1371_.jpg'},
    {image: 'https://images-na.ssl-images-amazon.com/images/I/81GfZasnt9L._SL1371_.jpg'},
    {image: 'https://images-na.ssl-images-amazon.com/images/I/81GfZasnt9L._SL1371_.jpg'},
    {image: 'https://images-na.ssl-images-amazon.com/images/I/81GfZasnt9L._SL1371_.jpg'}
  ];

}

顺便说一句，这段代码来自 ngx bootstrap 文档和我从 google 中挑选的图像。我知道如果文档代码不起作用，这不是一个好兆头，但也许我遗漏了一些东西，如果遇到类似问题的人可以帮助我，我会很高兴。

Answer 1

你好，只需在幻灯片中添加此 class mx-auto，对我有用:)：

  <slide *ngFor="let slide of slides; let index=index" class="mx-auto">
     ...
  </slide>

如果您愿意，可以将以下内容 css 添加到您的幻灯片中：

margin-left: auto !important;
margin-right: auto !important;

Answer 2

像这样删除添加的属性

<carousel>
  <slide *ngFor="let slide of slides; let index=index">
    <img [src]="slide.image" alt="image slide" style="display: block; width: 100%;">
    <div class="carousel-caption">
      <h4>Slide {{index}}</h4>
    </div>
  </slide>
</carousel>

无法在 ngx-bootstrap 的多幻灯片轮播中呈现图像

Can't render images in multi slide carousel of ngx-bootstrap

angular

bootstrap-4

ngx-bootstrap