Angular Carousel using ngx-bootstrap

Question

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?

João Canhoto · Accepted Answer · 2019-09-18 01:50:51Z

3

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

edited Sep 18, 2019 at 1:50

answered Sep 17, 2019 at 20:26

João Canhoto

311 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ganesh Vellanki Over a year ago

This is correct as per latest versions, thanks @João Canhoto

Bogac · Accepted Answer · 2017-05-06 22:22:16Z

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)

answered May 6, 2017 at 22:22

Bogac

3,7156 gold badges39 silver badges62 bronze badges

Comments

Frank Nguyen · Accepted Answer · 2017-06-01 12:02:04Z

0

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>

edited Jun 1, 2017 at 12:02

answered Jun 1, 2017 at 9:39

Frank Nguyen

6,6633 gold badges41 silver badges38 bronze badges

Comments

Alvargon · Accepted Answer · 2017-09-18 12:35:44Z

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

Collectives™ on Stack Overflow

Angular Carousel using ngx-bootstrap

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related