https://github.com/shadynagy/ngx-smart-slider
Angular Smart Slider
https://github.com/shadynagy/ngx-smart-slider
angular ngx ngx-smart-slider slider
Last synced: about 2 months ago
JSON representation
Angular Smart Slider
- Host: GitHub
- URL: https://github.com/shadynagy/ngx-smart-slider
- Owner: ShadyNagy
- License: mit
- Created: 2020-09-07T15:14:02.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-03-18T17:36:38.000Z (over 5 years ago)
- Last Synced: 2025-04-03T11:45:58.383Z (about 1 year ago)
- Topics: angular, ngx, ngx-smart-slider, slider
- Language: TypeScript
- Homepage:
- Size: 996 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
NGX-SMART-SLIDER
# NGX-SMART-SLIDER
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.0.
## :star: Give a Star!
If you like or are using this project please give it a star [here](https://github.com/ShadyNagy/ngx-smart-slider). Thanks!
## Screenshot
## ✨ Features
- Slider
## ☀️ License
## 🖥 Environment Support
* Angular `^9.0.0` [](https://www.npmjs.com/package/ngx-smart-slider)
## 📦 Installation
#### NPM
```bash
npm install ngx-smart-slider --save
```
## 🔨 Usage
Import the component modules you want to use into your `app.module.ts` file and [feature modules](https://angular.io/guide/feature-modules).
```ts
import {NgxSmartSliderModule} from 'ngx-smart-slider';
@NgModule({
imports: [ NgxSmartSliderModule ]
})
export class AppModule {
}
```
In your template write this code.
```html
```
## 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
* [NPM](https://www.npmjs.com/package/ngx-smart-slider)
* [Website](http://www.shadynagy.com)
* [LinkedIn](https://www.linkedin.com/in/shadynagy)
* [Twitter](https://twitter.com/ShadyNagy_)
## ⌨️ Development
```bash
$ git clone git@github.com:ShadyNagy/ngx-smart-slider.git
$ cd ngx-smart-slider
$ npm install
$ npm run build ngx-smart-slider -- --prod
$ npm run start
```
## 🤝 Contributing
[](https://github.com/shadynagy/ngx-smart-slider/pulls)
We welcome all contributions. Please read our [CONTRIBUTING.md](https://github.com/shadynagy/ngx-smart-slider/blob/master/CONTRIBUTING.md) first. You can submit any ideas as [pull requests](https://github.com/shadynagy/ngx-smart-slider/pulls) or as [GitHub issues](https://github.com/shadynagy/ngx-smart-slider/issues).
## 🎉 Users
- [ShadyNagy](http://www.shadynagy.com/)
> We list some users here, if your company or product uses ngx-smart-slider, let us know [here](https://github.com/shadynagy/ngx-smart-slider/issues/1)!