ngb-carousel not loading properly on page refresh in an angular application

I'm using ngb-carousel in my angular application for a simple website, everything is working fine but whenever i refresh, carousel's image doesn't load quickly whereas indicators and arrows gets loaded.

screen shot of the defect

I'm wondering is there any solution for this ?. I tried putting a min-height so that atleast it looks aesthetic even if the image is not loaded. I would be very grateful for any suggestions or solutions. My code related to the carousel goes like this.

Parent component:

<div style="min-height: 500px;">
  <banner-slider></banner-slider>
</div>

Banner Slider Component:

<ngb-carousel 
  [showNavigationArrows]="true" 
  [showNavigationIndicators]="true"
  interval="10000"
  [keyboard]="true"
  [pauseOnHover]="true"
  [wrap]="true">
  <ng-template ngbSlide  *ngFor="let slide of sliderContent; let i = index" >
    <div class="picsum-img-wrapper">
      <img style="filter: brightness(0.5);" src="{{slide.image}}">
    </div>
    <div class="carousel-content text-left">
      <div class="my-2"> 
        <h5><strong>{{slide.content.title}}</strong></h5>
      </div>
      <div class="my-2 text-wrap" style="width: 45rem">
        <h2 style="font-size: 4rem;"><strong>{{slide.content.heading}}</strong></h2>
      </div>
      <div class="my-2 text-wrap" style="width: 45rem">
        <p>{{slide.content.short_description}}</p>
      </div>
      <div class="my-2 text-wrap">
       <a  [href]="slide.button.url"><button class="btn btn-secondary">{{slide.button.text}}</button></a> 
      </div>
    </div>
  </ng-template>
</ngb-carousel>

and this is some css i have use to do some modifications:

.carousel-content {
  position: absolute;
  bottom: 50%;
  left: 15%;
  z-index: 20;
  color: white;
}

.carousel-indicators li {
  width : 20px!important;
  height: 20px !important;
  border-radius: 50% !important
}

.carousel-indicators li {
  width : 20px!important;
  background-color: black;
  height: 20px !important;
  border-radius: 50% !important
}

.carousel-indicators .active {
  width : 20px!important;
  background-color: yellow;
  height: 20px !important;
  border-radius: 50% !important
}

.carousel-control-prev-icon{
  background-image: url('https://apufpel.com.br/assets/img/seta_prim.png');
}
.carousel-control-next-icon{
  background-image: url('https://apufpel.com.br/assets/img/seta_ult.png');
}


Read more here: https://stackoverflow.com/questions/68482207/ngb-carousel-not-loading-properly-on-page-refresh-in-an-angular-application

Content Attribution

This content was originally published by Mohammed Safee Uddin at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: