Search code examples
angularcarouselng2-bootstrap

ng2 Bootstrap Carousel: unable to set active slide value. It always takes slide 1

I am using http://valor-software.com/ng2-bootstrap/#/carousel for my project.

I am able to implement it but slide 1 is always active. I am not sure how to remove the active class from slide1.

The only problem is that I am not able to set the active slide value to a particular value. WhenI set the [active] input, I get the slide is set the value for as well as the first slide. I am not able to remove the active class for slide 1. 

<carousel *ngIf="planList" (activeSlideChange)="onSlideChange($event)" [interval]="false">
  <slide *ngFor="let plan of planList" [active]="plan.active">  
      <oe-plan-details [planDetailsSummary]="plan"></oe-plan-details>
  </slide>
</carousel>

In this case, I have set plan.active for plan-3 as true. I see both plan-1 and plan-3. That is, 2 carousels

Solution

  • You should use 2 way data binding to set active index 

    <carousel [(activeSlide)]="activeIndex">
      <slide *ngFor="let i of items">
        <img [src]="i.image" class="img-responsive" alt="some image">
      </slide>
</carousel>