Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
@jaspero/ng-slider
Advanced tools
Readme
A slider library for Angular
To install this library, run:
$ npm install --save @jaspero/ng-slider
Import JpSliderModule
in to your @NgModule
:
@NgModule({
imports: [
JpSliderModule
],
...
})
export class AppModule {}
You can also provide default slider configuration options when importing the module
@NgModule({
imports: [
JpSliderModule.defaultOptions(options)
],
...
})
Now you can use the slider in your components like this:
<jp-slider [options]="options">
<jp-slides>
<jp-slide>
<h1>Slide 1</h1>
<p>Content 1</p>
</jp-slide>
<jp-slide>
<h1>Slide 2</h1>
<p>Content 2</p>
</jp-slide>
</jp-slides>
<jp-slide-pagination></jp-slide-pagination>
<button jpSlideArrow="left">Left</button>
<button jpSlideArrow="right">Right</button>
</jp-slider>
You can provide default global options when importing the slider module JpSliderModule.defaultOptions(options)
or on the jp-slider
component <jp-slider [options]="options">
. 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) |
The library ships with bare minimum styles. This is all there is to it:
// 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.
(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/815MIT © Jaspero co.
FAQs
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) ![Build](https://github.com/Jaspero/ng-slider/workflows/Build/badge.svg) [![NPM Version
The npm package @jaspero/ng-slider receives a total of 108 weekly downloads. As such, @jaspero/ng-slider popularity was classified as not popular.
We found that @jaspero/ng-slider demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.