ngx-smart-slider

An enterprise-class UI components based on slider and Angular

Usage no npm install needed!

<script type="module">
  import ngxSmartSlider from 'https://cdn.skypack.dev/ngx-smart-slider';
</script>

README

NGX-SMART-SLIDER

This project was generated with Angular CLI version 9.1.0.

:star: Give a Star!

If you like or are using this project please give it a star here. Thanks!

Screenshot

ngx-smart-slider

✨ Features

  • Slider.

☀️ License

🖥 Environment Support

  • Angular ^9.0.0 npm package

📦 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

PRs Welcome

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!