Angular Carousel using ngx-bootstrap

问题

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?

回答1:

Add this to your images (img tag):

 class="img-responsive center-block"

...yet it helps to have all images same sized before loading them to make it look decent.

Bootstrap carousel does not auto resize images & center zoom in given area. If you want that effect you better use another carousel component (not ngx-bootstrap one)

回答2:

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

回答3:

This is how I fix this issue, (base on @Bogac's answer)

<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>

回答4:

Remember that you have to had the dependencies installed.

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

Example

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",
  ],

来源：https://stackoverflow.com/questions/43759957/angular-carousel-using-ngx-bootstrap

标签

angular

twitter-bootstrap

carousel

ngx-bootstrap