CODEWITHSUNDEEP
angulartwitter-bootstrapcarouselngx-bootstrap
Belgi
Belgi

Reputation: 15062

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 enter image description here

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?

Upvotes: 1

Views: 13445

Answers (4)

João Canhoto
João Canhoto

Reputation: 31

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

Upvotes: 3

Alvargon
Alvargon

Reputation: 322

Remember that you have to had the dependencies installed.

npm install ngx-bootstrap [email protected] 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",
  ],

Upvotes: 0

Frank Nguyen
Frank Nguyen

Reputation: 6653

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>

Upvotes: 0

Bogac
Bogac

Reputation: 3707

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)

Upvotes: 1

Related Questions