Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Jaspero/ng-slider
A light slider with no external dependencies
https://github.com/Jaspero/ng-slider
angular slider
Last synced: 23 days ago
JSON representation
A light slider with no external dependencies
- Host: GitHub
- URL: https://github.com/Jaspero/ng-slider
- Owner: Jaspero
- License: mit
- Created: 2018-11-13T15:17:26.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-07-26T11:41:11.000Z (5 months ago)
- Last Synced: 2024-10-04T07:05:13.832Z (2 months ago)
- Topics: angular, slider
- Language: TypeScript
- Size: 4.36 MB
- Stars: 5
- Watchers: 3
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ng-slider - A light slider with no external dependencies. (Table of contents / Third Party Components)
- fucking-awesome-angular - ng-slider - A light slider with no external dependencies. (Table of contents / Third Party Components)
- fucking-awesome-angular - ng-slider - A light slider with no external dependencies. (Table of contents / Third Party Components)
README
[](https://github.com/semantic-release/semantic-release)
[](https://www.npmjs.com/package/@jaspero/ng-slider)
# NG Slider
A slider library for Angular
## Installation
To install this library, run:
```bash
$ npm install --save @jaspero/ng-slider
```
## Setup
Import `JpSliderModule` in to your `@NgModule`:
```ts
@NgModule({
imports: [
JpSliderModule
],
...
})
export class AppModule {}
```
You can also provide default slider [configuration options](#options)
when importing the module
```ts
@NgModule({
imports: [
JpSliderModule.defaultOptions(options)
],
...
})
```
Now you can use the slider in your components like this:
```html
Slide 1
Content 1
Slide 2
Content 2
Left
Right
```
## Configuration
### Options
You can provide default global options when importing the slider module `JpSliderModule.defaultOptions(options)`
or on the `jp-slider` component ``. Options provided through the component
input are merged with default options with component options overriding the default ones.
| name | type | default | description |
| --------------------- | ------- | ------- | -------------------------------------------------------------------------------------------- |
| blocksPerView | number | 1 | how many slides should be shown per view |
| slideTime | number | 0 | on what interval should the slider auto slide (disabled if 0) |
| movesPerClick | number | 1 | how many slides should be moved per click on the jpSlideArrow directive |
| initialSlide | number | 0 | index of the first slide that should be in view when the component inits |
| loop | boolean | true | should the slider loop (clicking on the last slide takes you to the first one and vice versa |
| firstToLastTransition | boolean | false | animate transition between first and last slide (performance intensive) |
### Events
### Customization
The library ships with bare minimum styles. This is all there is to it:
```scss
// jp-slider component
:host {
display: block;
height: 100%;
width: 100%;
}
.jp-s-w {
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
}
.jp-s-w-i {
position: relative;
height: 100%;
display: flex;
transition: 0s;
&.active {
transition: 0.3s;
}
}
```
This is to allow for all kinds of customizations, with the downside being
that no styles are provided out of the box.
## Caveats
- If hammer is enabled and you need click events in a slide use `(tap)` instead of `(click)`.
Hammer has a bug where it registers the click event after pan ends, there are a lot of issues
documenting this behaviour, here is one example:
https://github.com/hammerjs/hammer.js/issues/815
## License
MIT © [Jaspero co.](mailto:[email protected])