How to control width of ngbSlide in NgbCarousel of ngbootstrap

Question

I am not able to change the width of carousel-item div present in NgbCarousel. below is the caurosal item sample

<ng-template ngbSlide>
    <img src="https://lorempixel.com/900/500?r=1" alt="Random first slide">
    <div class="carousel-caption">
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </ng-template>

its width is 100% how can i reduce it to 25%. ng-template will render into carusal item where its width is coming 100%. I have tried to put a ngclass attribute over ng-template tag but its throwing runtime error as below :

    <ng-template ngbSlide [ngClass]="'ddd'">

ERROR TypeError: Cannot read property 'add' of undefined
    at EmulatedEncapsulationDomRenderer2.DefaultDomRenderer2.addClass

score 0 · Answer 1 · answered Jun 26 '18 at 14:19

I think the problem there (and cause of the error) is that <ng-template> are not rendered, they are placeholders, so there is no sense in adding a class to something that is not rendered right?

You might as well replace it with a <div> wrapper:

<div ngbSlide [ngClass]="'ddd'">
   <img src="https://lorempixel.com/900/500?r=1" alt="Random first slide">
    <div class="carousel-caption">
      <h3>First slide label</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
</div>

How to control width of ngbSlide in NgbCarousel of ngbootstrap

1 Answers1