ngx-dynamic-carousel
The ngx-dynamic-carousel library is a carousel component built using Angular.
Installation
To install this library, run:
$ npm i ngx-dynamic-carousel --save
Using this library
From your Angular AppModule
:
import { NgxDynamicCarouselModule } from "ngx-dynamic-carousel";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
// import { NoopAnimationsModule } "@angular/platform-browser/animations";
// BrowserAnimationsModule or NoopAnimationsModule is mandatory.
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, BrowserAnimationsModule, NgxDynamicCarouselModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
Once the library is imported, you can use its component in your Angular application:
<ngx-dynamic-carousel
[mainContentTemplate]="mainContentTemplate"
[leftArrowTemplate]="leftArrowTemplate"
[rightArrowtemplate]="rightArrowTemplate"
[items]="items"
[visibleCount]="1"
[animationState]="'fade'"
>
<!-- main content template starts here -->
<ng-template let-item #mainContentTemplate>
<div class="p-4 border border-gray-500">
<img [src]="item.imageUrl">
<span class="font-semibold">
{{ item.name }}
</span>
</div>
</ng-template>
<!-- main content template ends here -->
<!-- Left arrow template starts -->
<ng-template #leftArrowTemplate>Left</ng-template>
<!-- Left arrow template ends -->
<!-- Right arrow template starts -->
<ng-template #rightArrowTemplate>Right</ng-template>
<!-- Right arrow template ends -->
</ngx-dynamic-carousel>
Available options
Option | Default value | Description | Example value |
---|---|---|---|
mainContentTemplate | none | (Required) The main content template defines the template of the carousel. | Refer #mainContentTemplate in the above example |
items | none | It is an array of objects that should contain all the values that is to be binded in the template | In the example above, the imageUrl and name are keys that are passed via items |
visibleCount | 1 | The number of mainContentTemplate that must be appeared in the carousel at a time | 4 (Four images will be dislpayed at one stretch) |
leftArrowTemplate | <- | It is a template to define the left navigation symbol of the carousel | Left |
rightArrowTemplate | -> | It is a template to define the right navigation symbol of the carousel | Right |
animationState | fade | The animationState can take the values fade, scale or custom. If the custom is set, then the user can customize the animation. | In the above example it is set as fade |
Custom Animation
To give custom animation, set animationState property to custom. Now you can pass the animation trigger with the mainContentTemplate.
License
MIT © Tibin && Fenn