🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Sign inDemoInstall
Socket

ngx-custom-carousel

Package Overview
Dependencies
Maintainers
0
Versions
17
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-custom-carousel

ngx-custom-carousel is a feature-rich Angular 17 component crafted to elevate your carousel experience. Seamlessly integrated with Angular, this library offers swipe functionality for smooth content navigation on various devices. The carousel comes equipp

1.5.0
latest
Source
npm
Version published
Weekly downloads
4
-20%
Maintainers
0
Weekly downloads
 
Created
Source

semantic-release: angular Build states

ngx-custom-carousel is a feature-rich Angular 17 component crafted to elevate your carousel experience. Seamlessly integrated with Angular, this library offers swipe functionality for smooth content navigation on various devices. The carousel comes equipped with next and forward buttons, enhancing user interaction. While these buttons maintain a sleek design for consistency, ngx-custom-carousel empowers users to fully customize carousel templates to suit their unique needs. Whether showcasing images, products, or other content, ngx-custom-carousel delivers a dynamic and intuitive solution for creating captivating carousels in Angular applications.

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

  • 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:
<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>
  • 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>

Keywords

angular

FAQs

Package last updated on 20 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts