NGX-SMART-SLIDER
This project was generated with Angular CLI version 9.1.0.
⭐ Give a Star!
If you like or are using this project please give it a star here. Thanks!
Screenshot
✨ Features
- Slider.
☀️ License
🖥 Environment Support
📦 Installation
NPM
npm install ngx-smart-slider --save
🔨 Usage
Import the component modules you want to use into your app.module.ts
file and feature modules.
import {NgxSmartSliderModule} from 'ngx-smart-slider';
@NgModule({
imports: [ NgxSmartSliderModule ]
})
export class AppModule {
}
In your template write this code.
<smart-slider [cellLimit]="3" [transitionDuration]="1" [height]="200" [items]="items" [showPrevious]="isShowPrevious" [showNext]="isShowNext"></smart-slider>
Properties
Property | Description | Type | Default |
---|---|---|---|
[class] | Set class | string | '' |
[transitionDuration] | Transition duration | number | 0.3 |
[autoplayInterval] | Auto play interval (MS) | number | 2000 |
[height] | Height | number | null |
[cellLimit] | Cell limit to show | number | 1 |
[itemPadding] | Item padding | number | 10 |
[itemMargin] | Item margin | number | 10 |
[pauseOnHover] | Pause when hover | boolean | false |
[loop] | Is looping | boolean | false |
[autoplay] | Auto play | boolean | false |
[showDots] | Show dots | boolean | false |
[showNext] | Show next button | boolean | false |
[showPrevious] | Show previous button | boolean | false |
[textColor] | Text color | string | 'black' |
[textPosition] | Text position | 'centered-top' or 'centered-bottom' or 'centered' or 'bottom-right ' or 'top-right' or 'top-left' or 'bottom-left' |
'centered' |
[items] | Items | Array | [] |
(select) |
Event fire when select item and return item | Item | null |
🔗 Links
⌨️ Development
$ git clone git@github.com:ShadyNagy/ngx-smart-slider.git
$ cd ngx-smart-slider
$ npm install
$ npm run start
🤝 Contributing
We welcome all contributions. Please read our CONTRIBUTING.md first. You can submit any ideas as pull requests or as GitHub issues.
🎉 Users
We list some users here, if your company or product uses ngx-smart-slider, let us know here!