Blog

Sharing is caring!

In this post, I’m going to show how you can activate only one bootstrap carousel item at a time in Angular. This is the simplest way to activate your looped data.

To achieve our goal we have to perform property binding for our class i.e. [ngClass]. Where we assign our method which is responsible for returning the dynamic class name. In the method, we send the index value of looped data.

Our method getActiveClass(i) activate only first value. After that bootstrap performs its own functionality to change the active slide.

// .html file
<div
      id="reviewCarouselControls"
      class="carousel slide"
      data-bs-ride="carousel"
    >
      <div class="carousel-inner">
        <div
          [ngClass]="getActiveClass(i)"
          *ngFor="let testimonial of testimonials; let i = index"
        >
          <div class="row">
            <div class="col-md-11 col-lg-10 mx-auto">
              <div class="box d-flex flex-column flex-md-row">
                <div class="img-box">
                  <img src="{{ testimonial.image }}" alt="" />
                </div>
                <div class="detail-box">
                  <div class="name">
                    <i class="fa fa-quote-left" aria-hidden="true"></i>
                    <h6>{{ testimonial.name }}</h6>
                  </div>
                  <p [innerHTML]="testimonial.description"></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="carousel_btn-container">
        <button
          class="carousel-control-prev"
          type="button"
          data-bs-target="#reviewCarouselControls"
          data-bs-slide="prev"
        >
          <i class="fa fa-long-arrow-left" aria-hidden="true"></i>
        </button>
        <button
          class="carousel-control-next"
          type="button"
          data-bs-target="#reviewCarouselControls"
          data-bs-slide="next"
        >
          <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
        </button>
      </div>
    </div>

// .ts file
getActiveClass(i: any) {
    if (i == 0) return 'carousel-item active';
    else return 'carousel-item ';
}

Keywords: angular bootstrap carousel example.

Sharing is caring!