coderain blog

How to Add Carousel Animations in ng-bootstrap with Angular 2: CSS Workaround for Fade In/Out Effects

Carousels are a staple of modern web design, allowing you to showcase images, testimonials, or featured content in an interactive, space-efficient way. If you’re building an Angular application, ng-bootstrap—a library that integrates Bootstrap components with Angular—provides a robust NgbCarousel component. However, by default, the ng-bootstrap carousel uses a slide transition (left/right movement) rather than a fade effect. Many developers prefer fade animations for a smoother, more modern look.

In this blog, we’ll walk through a step-by-step guide to creating a fade-in/out animation for ng-bootstrap carousels in Angular 2+. We’ll use a CSS workaround to override the default slide behavior, ensuring full control over the animation’s duration, easing, and appearance.

2025-12

Table of Contents#

  1. Prerequisites
  2. Setting Up the Angular Project
  3. Installing ng-bootstrap and Dependencies
  4. Creating a Basic ng-bootstrap Carousel
  5. Understanding the Default Carousel Behavior
  6. The CSS Workaround for Fade In/Out Effects
  7. Customizing the Animation (Duration and Easing)
  8. Troubleshooting Common Issues
  9. Conclusion
  10. References

Prerequisites#

Before getting started, ensure you have the following tools and knowledge:

  • Node.js (v14+ recommended) and npm (v6+).
  • Angular CLI (v12+). Install it globally with: 
    npm install -g @angular/cli
  • Basic familiarity with Angular (components, modules, and template syntax).
  • Basic understanding of CSS transitions and animations.

Setting Up the Angular Project#

First, create a new Angular project. Open your terminal and run:

ng new ngb-carousel-fade-demo  
cd ngb-carousel-fade-demo

When prompted, choose your preferred styling (e.g., CSS, SCSS). For this tutorial, we’ll use CSS.

To verify the project works, run:

ng serve --open

Your default Angular app should load at http://localhost:4200.

Installing ng-bootstrap and Dependencies#

ng-bootstrap requires Bootstrap’s CSS (but not Bootstrap’s JavaScript, as it’s fully Angular-native). Install the necessary packages:

Step 1: Install ng-bootstrap#

Run this command in your project root:

npm install @ng-bootstrap/ng-bootstrap bootstrap

Step 2: Import Bootstrap CSS#

Add Bootstrap’s CSS to your project. Open angular.json and locate the styles array under architect > build > options. Add Bootstrap’s CSS path:

"styles": [  
  "node_modules/bootstrap/dist/css/bootstrap.min.css",  
  "src/styles.css"  
]

Step 3: Import NgbCarouselModule#

In your Angular app, import NgbCarouselModule to use the carousel component. Open src/app/app.module.ts and update it:

import { NgModule } from '@angular/core';  
import { BrowserModule } from '@angular/platform-browser';  
import { NgbCarouselModule } from '@ng-bootstrap/ng-bootstrap'; // Import the module  
 
import { AppComponent } from './app.component';  
 
@NgModule({  
  declarations: [AppComponent],  
  imports: [BrowserModule, NgbCarouselModule], // Add NgbCarouselModule here  
  providers: [],  
  bootstrap: [AppComponent]  
})  
export class AppModule {}

Now, let’s build a simple carousel to test the default behavior.

Step 1: Update the App Component Template#

Open src/app/app.component.html and replace its content with a basic ng-bootstrap carousel:

<!-- app.component.html -->  
<div class="container mt-5">  
  <h2>Default ng-bootstrap Carousel (Slide Effect)</h2>  
  <ngb-carousel>  
    <!-- Slide 1 -->  
    <ng-template ngbSlide>  
      <div class="picsum-img-wrapper">  
        <img src="https://picsum.photos/id/237/800/400" alt="First slide" class="w-100">  
      </div>  
      <div class="carousel-caption">  
        <h3>First Slide</h3>  
        <p>Default slide transition (left/right)</p>  
      </div>  
    </ng-template>  
 
    <!-- Slide 2 -->  
    <ng-template ngbSlide>  
      <div class="picsum-img-wrapper">  
        <img src="https://picsum.photos/id/238/800/400" alt="Second slide" class="w-100">  
      </div>  
      <div class="carousel-caption">  
        <h3>Second Slide</h3>  
        <p>No fade effect yet!</p>  
      </div>  
    </ng-template>  
 
    <!-- Slide 3 -->  
    <ng-template ngbSlide>  
      <div class="picsum-img-wrapper">  
        <img src="https://picsum.photos/id/239/800/400" alt="Third slide" class="w-100">  
      </div>  
      <div class="carousel-caption">  
        <h3>Third Slide</h3>  
        <p>We'll fix this next!</p>  
      </div>  
    </ng-template>  
  </ngb-carousel>  
</div>

Step 2: Run the App#

Start the development server again:

ng serve --open

You’ll see a carousel that transitions between slides with a left/right slide effect (the default behavior). Our goal is to replace this with a smooth fade-in/out effect.

The ng-bootstrap carousel uses Bootstrap’s underlying carousel CSS classes for transitions. By default:

  • Slides are positioned absolutely within the carousel container.
  • The active slide is visible, and others are hidden.
  • Transitions use transform: translateX() to slide slides left/right.

To create a fade effect, we need to override this behavior with custom CSS.

The CSS Workaround for Fade In/Out Effects#

The key is to replace the slide transition with an opacity-based fade. Here’s how:

Step 1: Add Custom CSS#

Open src/styles.css (global styles) and add the following CSS:

/* Fade animation for ng-bootstrap carousel */  
.carousel-fade .carousel-item {  
  opacity: 0;  
  transition-property: opacity;  
  transform: none !important; /* Disable default slide transform */  
}  
 
.carousel-fade .carousel-item.active,  
.carousel-fade .carousel-item-next.carousel-item-left,  
.carousel-fade .carousel-item-prev.carousel-item-right {  
  opacity: 1;  
}  
 
.carousel-fade .carousel-item-next,  
.carousel-fade .carousel-item-prev,  
.carousel-fade .carousel-item.active.carousel-item-left,  
.carousel-fade .carousel-item.active.carousel-item-right {  
  opacity: 0;  
}  
 
/* Ensure the active slide stays visible during transition */  
.carousel-fade .carousel-item.active {  
  transition: opacity 0.5s ease-in-out; /* Adjust duration here */  
}

Update your ngb-carousel element in app.component.html to include the carousel-fade class (this scopes our CSS to only carousels we want to fade):

<ngb-carousel class="carousel-fade"> <!-- Add the class here -->  
  <!-- Slides remain the same -->  
</ngb-carousel>

How It Works#

Let’s break down the CSS:

  1. .carousel-fade .carousel-item: Targets all slides in carousels with the carousel-fade class.

    • opacity: 0: Hide slides by default.
    • transform: none !important: Disable Bootstrap’s default translateX slide animation.

  2. .carousel-item.active: The currently visible slide.

    • opacity: 1: Make it fully visible.
    • transition: opacity 0.5s ease-in-out: Animate opacity over 0.5 seconds with smooth easing.

  3. .carousel-item-next/.carousel-item-prev: Slides entering/exiting the view.

    • opacity: 0: Keep them hidden until they become active.

  4. .carousel-item-next.carousel-item-left/.carousel-item-prev.carousel-item-right: Intermediate states during transition (when a new slide is added and the old one is removed).

    • opacity: 1: Ensure the active slide remains visible during the transition.

Test the Fade Effect#

Run the app again (ng serve --open). The carousel will now fade smoothly between slides instead of sliding!

Customizing the Animation#

You can tweak the animation duration and easing to match your design:

Adjust Duration#

Change the transition property’s duration (e.g., from 0.5s to 1s for a slower fade):

.carousel-fade .carousel-item.active {  
  transition: opacity 1s ease-in-out; /* 1-second fade */  
}

Change Easing#

Use different easing functions (e.g., linear, ease-in, ease-out):

transition: opacity 0.5s linear; /* Linear speed */  
transition: opacity 0.5s ease-in; /* Faster start, slower end */

Troubleshooting Common Issues#

1. Slides Are Not Fading#

  • Check the carousel-fade class: Ensure it’s applied to the <ngb-carousel> element.
  • Global CSS import: Verify styles.css is included in angular.json (it should be by default).

2. Slides Are Still Sliding#

  • transform: none !important: The !important flag ensures Bootstrap’s default translateX is overridden. If missing, the slide effect will persist.

3. Flickering During Transition#

  • Adjust transition timing: If slides flicker, try increasing the duration (e.g., 0.6s instead of 0.5s).

  • Ensure z-index: Add z-index: 1 to .carousel-item.active to keep it above other slides:

    .carousel-fade .carousel-item.active {  
  z-index: 1;  
}

4. Conflicting Styles#

If you’re using component-scoped styles (e.g., app.component.css), use ::ng-deep to penetrate the shadow DOM (not recommended for production, but useful for testing):

::ng-deep .carousel-fade .carousel-item {  
  /* CSS rules here */  
}

Conclusion#

With this CSS workaround, you can easily add fade-in/out animations to ng-bootstrap carousels in Angular. By overriding Bootstrap’s default slide transition with opacity-based CSS, you gain full control over the animation’s look and feel. Experiment with duration, easing, and other properties to match your app’s design system!

References#