无法在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>

下面是角度代码

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引导程序文档以及我从Google挑选的图像。如果文档代码不起作用，我知道这不是一个好兆头，但也许我遗漏了一些东西，如果有人遇到类似问题，可以为我提供帮助，我将感到非常高兴。

Answer 1

您好，请在幻灯片中添加此类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>