Bootstrap carousel not working in all the pages in the angular application

Question

I have multiple pages in my application and each page has carousel. The carousel should auto-slide but it is auto sliding only when I refresh the page. For example: If I am in page A and refresh then the carousel is working fine. If I go to page 2, the carousel in page 2 is not auto-sliding but again after refreshing that page, the carousel in page 2 is working fine.

Below is my Bootstrap carousel code.

<div id="carousel-example" class="carousel slide carousel-fade" data-interval="3000" data-ride="carousel">
  <div class="jumbotron">
    <!--Indicators-->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example" data-slide-to="1"></li>
      <li data-target="#carousel-example" data-slide-to="2"></li>
    </ol>
    <!--/.Indicators-->
    <!--Slides-->
    <div class="carousel-inner " role="listbox">
      <!--First slide-->
      <div class="carousel-item active">
        <div class="row">
          <div class="col-6 ">
            <h1>heading</h1>
            <p>text</p>
          </div>
          <div class="col-6">
            <img src="...."  style="width:100%"  height="250"></div>
          </div>
      </div>
      <!--/First slide-->
      <!--Second slide-->
      <div class="carousel-item">
        <div class="row">
          <div class="col-6 ">
            <h1>heading</h1>
            <p>text</p>
          </div>
          <div class="col-6">
            <img src="...."  style="width:100%"  height="250"></div>
          </div>
      </div>
      <!--/Second slide-->
      <!--Third slide-->
      <div class="carousel-item">
        <div class="row">
          <div class="col-6 ">
            <h1>heading</h1>
            <p>text</p>
          </div>
          <div class="col-6">
            <img src="...."  style="width:100%"  height="250"></div>
          </div>
      </div>
      <!-- Third slide-->
    </div>
  </div>
<!--/.Carousel Wrapper-->
</div>

I see that data-ride="carousel" attribute of the .carousel element tells the Bootstrap to start animating the carousel immediately when the page load. If that is the issue what would be the alternate solution ?

Answer 1

You can try initializing the carousel in ngAfterViewInit() method.

import { AfterViewInit, Component, ElementRef, OnInit } from '@angular/core';
declare var $: any; // used to access jQuery

@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.scss']
})
export class HomePageComponent implements OnInit, AfterViewInit {
  
  @ViewChild('carousel') _carousel!: ElementRef;

  constructor() { }

  ngOnInit(): void {
  }

  ngAfterViewInit() {
    const carouselElem = this._carousel?.nativeElement;
    const carousel = $(carouselElem).carousel();
  }

}

In your html file add #carousel,

<div #carousel id="carousel-example" class="carousel slide carousel-fade" data-interval="3000" data-ride="carousel">
  ...

If you are using Bootstrap V5,

<div #carousel id="carousel-example" class="carousel slide carousel-fade" data-bs-interval="3000" data-bs-ride="carousel">
  ...