angular-carousel-modern

December 15, 2025 · View on GitHub

A modern, customizable carousel component for Angular 16+ with support for both standalone and NgModule-based applications.

Features

  • 🎨 Beautiful Design: Clean, professional carousel with white text overlays and blue accents
  • 🎯 Flexible Content: Support for image backgrounds with customizable text overlays
  • 🎮 Navigation Controls: Circular arrow buttons and dot indicators
  • Auto-play: Configurable auto-play functionality
  • 📱 Responsive: Fully responsive design that works on all screen sizes
  • 🔧 Customizable: Extensive SCSS variables for easy theming
  • 🚀 Angular 16+: Built for modern Angular with standalone component support
  • 📦 TypeScript: Full TypeScript support with interfaces and types

Installation

npm install angular-carousel-modern

Usage

Standalone Component (Angular 14+)

import { Component } from '@angular/core';
import { CarouselComponent, CarouselItem } from 'angular-carousel-modern';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [CarouselComponent],
  template: `
    <lib-carousel
      [items]="carouselItems"
      [autoPlay]="true"
      [autoPlayInterval]="5000"
      [showArrows]="true"
      [showDots]="true"
      [overlayPosition]="'center'"
      (slideChange)="onSlideChange($event)"
    ></lib-carousel>
  `
})
export class ExampleComponent {
  carouselItems: CarouselItem[] = [
    {
      imageUrl: 'https://example.com/image1.jpg',
      title: 'Find the Right Tenders Fast',
      description: 'Bid on relevant tenders for your business in one spot.',
      overlayPosition: 'left'
    },
    {
      imageUrl: 'https://example.com/image2.jpg',
      title: 'Discover Darb\'s Services',
      description: 'Explore tools designed to simplify tender management and support smarter business decisions.',
      overlayPosition: 'center'
    },
    {
      imageUrl: 'https://example.com/image3.jpg',
      title: 'Trusted by Businesses Across Qatar',
      description: 'Join thousands of companies that rely on DARB for streamlined tender discovery.',
      overlayPosition: 'right'
    }
  ];

  onSlideChange(index: number): void {
    console.log('Current slide:', index);
  }
}

NgModule-based Application

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxCarouselModule } from 'angular-carousel-modern';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgxCarouselModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then use the component in your template:

<lib-carousel
  [items]="carouselItems"
  [autoPlay]="true"
  [autoPlayInterval]="5000"
  [showArrows]="true"
  [showDots]="true"
  (slideChange)="onSlideChange($event)"
></lib-carousel>

API Reference

CarouselComponent

Inputs

PropertyTypeDefaultDescription
itemsCarouselItem[][]Array of carousel items to display
autoPlaybooleanfalseEnable auto-play functionality
autoPlayIntervalnumber5000Interval in milliseconds for auto-play
showArrowsbooleantrueShow navigation arrow buttons
showDotsbooleantrueShow dot indicators
overlayPosition'left' | 'center' | 'right''center'Default position for text overlays
hostClassstring | string[]undefinedExtra class(es) added to the host <lib-carousel> element (useful for scoping CSS overrides)
containerClassstring | string[] | Set<string> | { [klass: string]: any }undefinedClass(es) applied to the internal .carousel-container element
containerStyle{ [key: string]: string | number }undefinedStyle map merged onto the internal .carousel-container (handy for setting CSS variables)

Outputs

EventTypeDescription
slideChangeEventEmitter<number>Emitted when the slide changes. Returns the current slide index.

CarouselItem Interface

interface CarouselItem {
  imageUrl: string;              // URL of the background image
  title: string;                 // Title text (displayed in blue, bold)
  description: string;           // Description text
  overlayPosition?: 'left' | 'center' | 'right';  // Optional overlay position override
}

OverlayPosition Type

type OverlayPosition = 'left' | 'center' | 'right';

Styling Customization

Use CSS custom properties (CSS variables) to theme without relying on deep selectors:

/* Global styles.css / styles.scss */
lib-carousel.my-carousel {
  --carousel-dot-color: #dbe7f5;
  --carousel-dot-active-color: #8bb8ff;
  --carousel-slide-radius: 18px;
  --carousel-nav-bg: rgba(234, 243, 255, 0.95);
  --carousel-nav-color: #2B5AA5;
}

Then scope “any CSS override” via a class on the host:

/* Global styles.css / styles.scss */
lib-carousel.my-carousel .carousel-item {
  outline: 2px solid rgba(30, 58, 138, 0.15);
}

Note: if you put overrides in an Angular component stylesheet (e.g. app.component.css), Angular scopes those selectors and they won’t reach inside the library component unless you use ::ng-deep. In that case:

/* app.component.css */
:host ::ng-deep lib-carousel.my-carousel .carousel-item {
  outline: 2px solid rgba(30, 58, 138, 0.15);
}

Examples

Basic Usage

<lib-carousel [items]="items"></lib-carousel>

With Auto-play

<lib-carousel
  [items]="items"
  [autoPlay]="true"
  [autoPlayInterval]="3000"
></lib-carousel>

Without Navigation Controls

<lib-carousel
  [items]="items"
  [showArrows]="false"
  [showDots]="false"
></lib-carousel>

Custom Overlay Positions

items: CarouselItem[] = [
  {
    imageUrl: 'image1.jpg',
    title: 'Left Positioned',
    description: 'This overlay is on the left',
    overlayPosition: 'left'
  },
  {
    imageUrl: 'image2.jpg',
    title: 'Center Positioned',
    description: 'This overlay is centered',
    overlayPosition: 'center'
  },
  {
    imageUrl: 'image3.jpg',
    title: 'Right Positioned',
    description: 'This overlay is on the right',
    overlayPosition: 'right'
  }
];

Browser Support

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)

Requirements

  • Angular 16.0.0 or higher
  • TypeScript 5.0.0 or higher

Development

Building the Library

npm run build:lib

Building for Production

npm run build:lib:prod

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

For issues and feature requests, please use the GitHub Issues page.