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