ngx-custom-carousel

Features

• Support for custom template using <ng-template> tag.
• Swipe left and swipe right gestures for navigation.
• Previous Next buttons
• Turn on/off auto switch and control using next and previous buttons
• Auto pause if hove on the item to make content readable

Installation

Install ngx-custom-carousel via npm:

npm  install  ngx-custom-carousel  --save

Demo

Demo and API Reference

Usage

1. Import the NgxCustomCarouselModule in your Angular module:

import { NgxCustomCarouselModule } from 'ngx-custom-carousel';

@NgModule({
    imports: [NgxCustomCarouselModule],
})
export class YourModule {}

2. Use the <ngx-custom-carousel> element in your component's template to display a carousel:

<div class="container">
    <div class="hw-full">
        <ngx-custom-carousel
            [items]="itemsTemplate"
            [customItemTemplate]="userDetailsTemplate"
            [delay]="5000"
            [enableControls]="true"
            [enableAutoSwitch]="true"></ngx-custom-carousel>
    </div>
</div>

3. 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>