ngx-basic-carousel v0.1.3
NgxBasicCarousel
About
This library was generated with Angular CLI version 13.3.0.
This is a package for a carousel on Angular..
Install
npm install ngx-basic-carousel
Import
In your app.module.ts file
// ...
import { NgxBasicCarouselModule } from 'ngx-basic-carousel';
@NgModule({
// ...
imports: [
// ...
NgxBasicCarouselModule,
// ...
]
})
export class AppModule {}Usage
<lib-ngx-basic-carousel></lib-ngx-basic-carousel>Attributes
Basic options
| Input | Type | Description | Default value |
|---|---|---|---|
| slides | Slide [] | An array of Slide. | [] |
| interval | number | Loop interval in milliseconds. | 3000 |
| width | string | width value in px. | 650px |
| height | string | height value in px. | 326px |
example:
<lib-ngx-basic-carousel [slides]="mySlides"
[interval]="1000"
width="1920px"
height="1080px"></lib-ngx-basic-carousel>Dots customisation
| Input | Type | Description | Default value |
|---|---|---|---|
| showDots | boolean | Display dots navigation. | true |
| activeDotColor | string | Active dot color . | #000 |
| inactiveDotColor | string | Inactive dot color. | #fff |
Type reference
Slide
interface Slide {
image: string;
targetLink: string;
}| Property | Type | Description |
|---|---|---|
| image | string | Image url. |
| targetLink | string | Redirection link if the slide is clickable, if there is no link the slide will not be clickable. |
Test the package locally
Clone the package repo : git clone https://github.com/MadiNaf/ngx-basic-carousel .
Build the package : ng build ngx-basic-carousel.
Create a symlink in your npm global folder, go to: ~/dist/ngx-basic-carousel and run npm link.
To verify that everything was done correctly, you can check whether the symlink for the package has been created using the following command: npm ls --depth=0 --link=true.
Now you need to create a new angular projet: ng new test-pkg, go to the project folder and link your project with the package : npm link ngx-basic-carousel.
After that you can import and use the package like we do when we use npm install instead of npm link.