Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dvhb/jetslider
A simple plugin for beautiful navigation between website screens.
https://github.com/dvhb/jetslider
javascript slider
Last synced: 19 days ago
JSON representation
A simple plugin for beautiful navigation between website screens.
- Host: GitHub
- URL: https://github.com/dvhb/jetslider
- Owner: dvhb
- License: mit
- Created: 2015-07-27T07:57:29.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-03-30T16:38:20.000Z (almost 7 years ago)
- Last Synced: 2024-12-18T11:41:33.802Z (24 days ago)
- Topics: javascript, slider
- Language: HTML
- Homepage: https://dvhb.github.io/jetslider
- Size: 41 KB
- Stars: 4
- Watchers: 19
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jetSlider
Simple plugin for making beautiful page transitions
## Demo
[Fullpage](http://dvhb.github.io/jetslider) | [Inline](http://dvhb.github.io/jetslider/inline_example.html)
## Options
| Option | Type | Default | Description |
| ------------------ | ---------- | ------------------------------------------------------ | ----------- |
| slideSelector | *String* | `'section'` | Selector of the slide elements |
| transitionDuration | *Number* | `800` | Duration of transition between slides |
| scroll | *Boolean* | `true` | Changing slides by mouse scroll |
| keyboard | *Boolean* | `true` if parent element is <body>. Else `false` | Changing slides by keyboard arrows |
| easing | *String* | `'ease-in-out'` | Easing function e.g. `'linear'`, `'ease-in'`, `'cubic-bezier(0.42,0,0.58,1)'`... |
| onBeforeMove | *Function* | `null` | Function which will be called with `newIndex` and `oldIndex` arguments every time when animation starts |
| onAfterMove | *Function* | `null` | Function which will be called with `newIndex` and `oldIndex` arguments every time when animation ends |
| jsFallback | *Boolean* | `true` | If `true` js fallback will be used for animations in browsers which don't support css transorms and transitions. If `false` slides will change without animation in those browsers |
Options can be changed after initialization:
```javascript
$('.slider').jetSlider(optionName, value);
```
## Methods
```javascript
$('.slider').jetSlider('moveto', index);
```
```javascript
$('.slider').jetSlider('moveup');
```
```javascript
$('.slider').jetSlider('movedown');
```
```javascript
$('.slider').jetSlider('destroy');
```
## Like declarative initialization?
You can initialize plugin without js code! Just add `data-jetslider` attribute to slider container.
Options can be customized by using data-* attributes:
```html
...
...
...
...
```
## License
[MIT License](./LICENSE) © [dvhb](http://dvhb.ru)