使用ngx-bootstrap的Angular Carousel [英] Angular Carousel using ngx-bootstrap

问题描述

我遵循了

箭头起作用了，但标题超出了图片，是一块

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

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

解决方案

在引导程序4.3.1中， img响应类被 img-fluid 和 center-block 由 mx-auto 进行，但是最后一个应该在< slide> 标签，因为不再在< img> 上设置width属性。

因此，对于使用Bootstrap 4.3.1的ngx-bootstrap 5.1.2，代码应如下所示（在Angular 7中进行了测试） ：

 < carousel [itemsPerSlide] = itemsPerSlide 
 [singleSlideOffset] = singleSlideOffset 
 [noWrap] = noWrap 
 [interval] = cycleInterval 
 [startFromIndex] = 0> 
< slide * ngFor =放开幻灯片；让index = index class = mx-auto> 
< img [src] = slide.image class = img-fluid> 
< div class = carousel-caption> 
< h4>幻灯片{{index}}< / h4> 
< / div> 
< / slide> 
< / carousel> 
  

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

  public itemsPerSlide = 3; 
 public singleSlideOffset = false; 
 public noWrap = false; 
 public cycleInterval = 3000; 
公共幻灯片= [
 {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'} 
]; 
  

I have followed the Getting started guide using angular-cli and I had a complete demo using the Alert module. I have then tried to add a Carousel as described here.

I don't have errors in the console, but the display looks wired and the Carousel is not functioning. This is how it looks

The arrows work but the caption goes outside the image, a block of white to the right of the image.

I have copy-pasted the component code as well as the HTML, and I tried the first two examples on the above link to make sure.

Can someone please help me figure out this problem?

解决方案

In bootstrap 4.3.1, the img-responsive class was replaced by img-fluid and the center-block by mx-auto, but this last one should be used inside the <slide> tag, because the width property is not set on the <img> anymore.

So, with ngx-bootstrap 5.1.2 which uses bootstrap 4.3.1, the code should be like this (tested with 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>

The above code expects your component.ts file to contain the below code:

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'}
];

这篇关于使用ngx-bootstrap的Angular Carousel的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！