时间戳

首页 > 解决方案 > ngx-bootstrap 多列表轮播在 Angular 10 中不起作用

angular - ngx-bootstrap 多列表轮播在 Angular 10 中不起作用

问题描述

我正在使用实现多列表轮播，"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>

标签： angularngx-bootstrapangular10

解决方案

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

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

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

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

.carousel-item {
    margin-right: 0;
}

推荐阅读