Install

npm i angular-carousel-fade-slider

This plugin is built for Angular 14 and above. If you're using a newer Angular version, please use --force during installation to ensure compatibility. The plugin is fully compatible with all Angular versions starting from v14.

Setup & Usage Follow these simple steps to integrate the banner slider into your Angular project:

Import the module In your app.module.ts or the module where you want to use the slider, import the library module:

@NgModule({ imports: [AngularSLiderModule], }) export class AppModule {} 2. Define your slider list Create an array of slider objects that will hold the information for each slide:

Live Demo

You can see the live demo of this project by clicking the link below:

Live Demo

Slider Object

Slider Interface

sliderType: string — Choose between 'carousel' or 'fade' for the slider effect.

sliderAuto: boolean — Set to true to enable auto-sliding, false to disable autoplay.

customWidth: number — Optional custom width for the slider.

sliderList: Array of Slider Objects Each object in the sliderList can contain:

id: number — Unique identifier for each slide.

imageUrl: string — Optional image URL for the slider.

caption: string — Optional caption for each slide.

link: string — Optional link for the slide.

backgroundColor: string — Optional background color. In case Image is not required, then it will be replaced by this background color.

className: string — Optional custom class name for additional styling.