Question 160337 in CSS Question posted in
Some basic documentation can be found here.

How do I resize & center the ng bootstrap carousel?

I’m using the ng bootstrap in my angular project but I’ve a problem with its style.
Actually, it doesn’t display to the center but in the upper left corner:

example

I want it to be centered and wide under the blue headbar.

I tried to work with CSS but the only similar result I get is to manually set the image to be like that:

style="width: 100%; height: 877px"

But I think it’s not the best solution.

How can I do?

UPDATE WITH CODE:

    <div class="carouselCont">
    <ngb-carousel *ngIf="top10">
          <ng-template *ngFor="let film of top10.items" ngbSlide >
          <div class="picsum-img-wrapper" (click)="onClick(film)">
            <img src="{{film.image}}" alt="Random first slide" style="width: 100%; height: 877px"/>
          </div>
          <div class="carousel-caption" (click)="onClick(film)">
            <h3>{{film.rank}} - {{film.title}}</h3>
            <p>{{film.year}}</p>
          </div>
        </ng-template>
    </ngb-carousel>
    </div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Hi @Eliseo thanks for answering. I still have the same problem, it look like that:

    how it looks

    I modified the code as you suggested, so:

    html

    <div class="carouselCont">
<ngb-carousel *ngIf="top10" [style.max-width.px]="width">
      <ng-template *ngFor="let film of top10.items" ngbSlide >
      <div class="picsum-img-wrapper" (click)="onClick(film)">
        <img src="{{film.image}}" alt="Random first slide" (load)="setWidth($event.target)"/>
      </div>
      <div class="carousel-caption" (click)="onClick(film)">
        <h3>{{film.rank}} - {{film.title}}</h3>
        <p>{{film.year}}</p>
      </div>
    </ng-template>
</ngb-carousel>
</div>

    css

    ngb-carousel {
    max-width:250px;
    margin:auto
}

    ts

      width = 0;
  setWidth(target:any)
    {
        this.width=target.naturalWidth;
    }

    I'd like to show images wide under the headbar and without need to scroll down to read caption. As I said, I'm able to obtain that result only setting a width to 100% and a fixed height...


  2. 0

    a ngb-carousel, by defect is 100% width. You can use, e.g.

    ngb-carousel 
{
    max-width:250px;
    margin:auto
}

    You also can "wait to load the first img and get the max-width the width of this image

    <ngb-carousel *ngIf="images" [style.max-width.px]="width">
  <ng-template ngbSlide>
        <div class="picsum-img-wrapper">
            <img #img [src]="images[1]" alt="Random second slide"
             (load)="setWidth($event.target)" />
        </div>
  </ng-template>
 ...
</ng.carousel>

    And define:

    width=0;
setWidth(target:any)
{
    this.width=target.naturalWidth;
}

    (don’t forget the margin:auto in your .css)

    stackblitz

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search