1

我正在使用实现多列表轮播，"ngx-bootstrap": "6.0.0",但它看起来在angular: 10.0.2. 我也试过了ngx-bootstrap: 6.0.0，它也没有用

它仅显示一张幻灯片 [第一个图像] 和其余图像的占位符。就像如果itemsPerSlide是 3，它只显示 1 个图像和 2 个图像的占位符。

组件代码

@ViewChild(CarouselComponent) myCarousel: CarouselComponent;
  loopcomplete = true;
  slidesChangeMessage;
  itemsPerSlide = 3;
  singleSlideOffset = true;
  noWrap = true;
  activeRange = 0;

  slides = [
    {image: 'assets/slides/1.jpeg'},
    {image: 'assets/slides/2.jpeg'},
    {image: 'assets/slides/3.jpeg'},
    {image: 'assets/slides/4.jpeg'},
    {image: 'assets/slides/5.jpeg'},
    {image: 'assets/slides/6.jpeg'},
    {image: 'assets/slides/7.jpeg'},
    {image: 'assets/slides/8.jpeg'},
    {image: 'assets/slides/9.jpeg'},
    {image: 'assets/slides/10.jpeg'},
    {image: 'assets/slides/11.jpeg'},
    {image: 'assets/slides/12.jpeg'},
  ];

HTML 代码

<div>
  <carousel [itemsPerSlide]="itemsPerSlide"
            [singleSlideOffset]="singleSlideOffset"
            [noWrap]="!noWrap"
            [interval]="false"
            [startFromIndex]="0"
            (slideRangeChange)="onSlideRangeChange($event)">
    <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>
</div>
4

4 回答 4

7

它看起来像轮播中的错误。我知道，在https://github.com/valor-software/ngx-bootstrap/issues/5879中报告了类似的问题，因此，希望在最近的将来看看它。无论如何，我将在那里分享有关修复的任何信息

上述链接问题的解决方法：

检查轮播元素 css 时，请注意.carousel-itemclass 已margin-right设置为-100%

要解决此问题，请添加此 css：

.carousel-item {
    margin-right: 0;
}
于 2020-08-12T10:16:03.377 回答
0

尝试升级到与 Angular v9.x 和 v10.x 兼容的 v6.0.0！

于 2020-07-13T10:48:47.897 回答
0

你应该将你的 ngx-bootstrap 更新到版本 6。请检查他们的 npm 包的兼容性。

NGX-BOOTSTRAP 兼容性

于 2020-07-13T10:55:19.397 回答
0

返回到 Bootstrap 的 4.0.0 版本。它对我有用。

它不适用于 4.5.0 版。

于 2020-07-16T00:34:06.050 回答