ngx-custom-carousel

ngx-custom-carousel

Angular library for a customizable carousel component with support for custom templates and swipe gestures.

Installation

Install ngx-custom-carousel via npm:

npm install ngx-custom-carousel --save

Demo

Usage

• Import the NgxCustomCarouselModule in your Angular module:

  import { NgxCustomCarouselModule } from "ngx-custom-carousel";
  
  @NgModule({
      imports: [NgxCustomCarouselModule],
  })
  export class YourModule {}
  

• Use the <ngx-custom-carousel> element in your component's template to display a carousel with string items:

  <div class="container">
      <div class="hw-full">
          <h3>String Items</h3>
          <ngx-custom-carousel [items]="items"></ngx-custom-carousel>
      </div>
      <div class="hw-full">
          <h3>With Custom Template</h3>
          <ngx-custom-carousel [items]="itemsTemplate" [customItemTemplate]="userDetailsTemplate" [delay]="5000"></ngx-custom-carousel>
      </div>
  </div>
  

• Define a custom template using the <ng-template> element for displaying user details:

  <ng-template #userDetailsTemplate let-item let-index="index">
      <div>Use your own html</div>
  </ng-template>
  

Features

• Support for custom template using <ng-template> tag.
• Swipe left and swipe right gestures for navigation.