ngx-scroll-carousel

Scroll carousel library for Angular.

Official documentation: https://astritdemiri.com/ng-library/ngx-scroll-carousel

Simple example using ngx-scroll-carousel: https://stackblitz.com/github/astritdemiri11/ngx-scroll-carousel-example

Get the complete changelog here: https://github.com/astritdemiri11/ngx-scroll-carousel/releases

Table of Contents

• Installation
• Usage
  • Import the ScrollCarouselModule
    • SharedModule
  • Use the service, the pipe or the directive

Installation

First you need to install the npm module:

1npm install ngx-scroll-carousel --save

Choose the version corresponding to your Angular version:

Angular	ngx-scroll-carousel
14 (ivy only)	1.x+

Usage

1. Import the ScrollCarouselModule:

Finally, you can use ngx-scroll-carousel in your Angular project. You have to import ScrollCarouselModule in the root NgModule of your application.

1import {BrowserModule} from '@angular/platform-browser';
2import {NgModule} from '@angular/core';
3import {ScrollCarouselModule} from 'ngx-scroll-carousel';
4
5@NgModule({
6    imports: [
7        BrowserModule,
8        ScrollCarouselModule
9    ],
10    bootstrap: [AppComponent]
11})
12export class AppModule { }

SharedModule

If you use a SharedModule that you import in multiple other feature modules, you can export the ScrollCarouselModule to make sure you don't have to import it in every module.

1@NgModule({
2    exports: [
3        CommonModule,
4        ScrollCarouselModule
5    ]
6})
7export class SharedModule { }

Note: Module services are provided in root @Injectable({ providedIn: 'root' }), see Dependency Injection.

Use the service, the pipe, the component or the directive:

You can either use the CarouselComponent exported by library

This is how you use the component to create the carousel:

1<carousel [configs]="carouselConfigs">
2  <div *ngFor="let item of items" carouselItem>{{ item }}</div>
3</carousel>