1

我已经按照使用 angular-cli 的入门指南进行操作，并且使用 Alert 模块进行了完整的演示。然后，我尝试按照此处所述添加轮播。

我在控制台中没有错误，但显示屏看起来是有线的，并且 Carousel 无法正常工作。这是它的样子 在此处输入图像描述

箭头有效，但标题超出图像，图像右侧的白色块。

我已经复制粘贴了组件代码以及 HTML，并尝试了上面链接中的前两个示例以确保。

有人可以帮我解决这个问题吗？

4

4 回答 4

3

在 bootstrap 4.3.1 中，img-responsive该类被替换为img-fluid和center-blockby mx-auto，但最后一个应该在<slide>标签内使用，因为不再设置 width 属性<img>。

因此，对于使用 bootstrap 4.3.1 的 ngx-bootstrap 5.1.2，代码应该是这样的（使用 Angular 7 测试）：

<carousel [itemsPerSlide]="itemsPerSlide"
          [singleSlideOffset]="singleSlideOffset"
          [noWrap]="noWrap"
          [interval]="cycleInterval"
          [startFromIndex]="0">
  <slide *ngFor="let slide of slides; let index=index" class="mx-auto">
    <img [src]="slide.image" class="img-fluid">
    <div class="carousel-caption">
      <h4>Slide {{index}}</h4>
    </div>
  </slide>
</carousel>

上面的代码期望您的 component.ts 文件包含以下代码：

public itemsPerSlide = 3;
public singleSlideOffset = false;
public noWrap = false;
public cycleInterval = 3000;
public slides = [
  {image: '//placehold.it/1200x600/444'},
  {image: '//placehold.it/1200x600/ccff00'},
  {image: '//placehold.it/1200x600/ddd'},
  {image: '//placehold.it/1200x600/ccff00'},
  {image: '//placehold.it/1200x600/444'},
  {image: '//placehold.it/1200x600/ddd'}
];
于 2019-09-17T20:26:12.383 回答
1

将此添加到您的图像（img标签）：

 class="img-responsive center-block"

...然而，在加载它们之前让所有图像大小相同以使其看起来不错是有帮助的。

Bootstrap 轮播不会在给定区域自动调整图像大小和中心缩放。如果你想要那种效果，你最好使用另一个轮播组件（不是ngx-bootstrap一个）

于 2017-05-06T22:22:16.743 回答
0

这就是我解决这个问题的方法，（基于@Bogac的回答）

<div class="container">
  <div class="col-md-8 col-xs-12 col-md-offset-2 push-md-2">
    <carousel>
      <slide *ngFor="let slide of slides; let index=index">
        <img [src]="slide.image" class="img-responsive center-block">
        <div class="carousel-caption">
          <h4>Slide {{index}}</h4>
          <p>{{slide.text}}</p>
        </div>
      </slide>
    </carousel>
  </div>
</div>
于 2017-06-01T09:39:10.930 回答
0

请记住，您必须安装依赖项。

npm install ngx-bootstrap bootstrap@4.0.0-beta jquery popper.js --save

例子

HTML：

<div class="container">
        <div class="col-xs-12">
            <carousel>
                <slide>
                    <img src="../../../assets/img/img1.jpg" class="img-responsive center-block">
                    <div class="carousel-caption">
                        <h4>Test</h4>
                        <p>test</p>
                    </div>
                </slide>
                <slide>
                    <img src="../../../assets/img/img2.jpg" class="img-responsive center-block">
                    <div class="carousel-caption">
                        <h4>Test2</h4>
                        <p>test2</p>
                    </div>
                </slide>
            </carousel>
        </div>
    </div>

app.module.ts：

import { AlertModule } from '../../node_modules/ngx-bootstrap';
import { CarouselModule } from '../../node_modules/ngx-bootstrap/carousel';

imports: [...,
AlertModule.forRoot(),
CarouselModule.forRoot(),
.],

.angular-cli.json：

"styles": [
     "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css",
  ],
于 2017-09-18T12:35:44.687 回答