https://github.com/kennethanceyer/parallax-slider
:foggy: awesome parallax slider
https://github.com/kennethanceyer/parallax-slider
Last synced: 2 months ago
JSON representation
:foggy: awesome parallax slider
- Host: GitHub
- URL: https://github.com/kennethanceyer/parallax-slider
- Owner: KennethanCeyer
- License: mit
- Created: 2014-10-27T08:57:07.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2017-08-03T14:23:16.000Z (almost 8 years ago)
- Last Synced: 2025-04-08T18:54:49.780Z (3 months ago)
- Language: JavaScript
- Homepage: http://www.pigno.se/barn/PIGNOSE-ParallaxSlider/
- Size: 2.99 MB
- Stars: 14
- Watchers: 4
- Forks: 9
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
PIGNOSE-ParallaxSlider
===================
> jQuery slider plugin that is supported "Parallax" effect.
[](https://badge.fury.io/js/pg-parallaxslider) [](https://badge.fury.io/bo/pg-parallaxslider) [](https://gitter.im/KennethanCeyer/PIGNOSE?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
- Licenced under MIT
- This plugin supports most browsers including Internet Explorer 8+, Chrome, Firefox, Safari and Opera.
- And also tested on Safari for MAC Platform, It is definitely safe on the most modern Browsers!
## Getting Started
### Installation
> This plugin needs `jQuery` library.
- Check the jQuery library at [here](http://jquery.com/download/) `Recommend version 1.11.x higher`
- Also you need jQuery easing library at [here](http://gsgd.co.uk/sandbox/jquery/easing/) for animation.
- And insert this snippets
```html
```
- import pignose-parallaxslider files(css, js)
```html
```
### If you use Bower
1. open terminal and type those command line.
```shell
bower install pg-parallaxslider
```
2. move `dist/js/pignose.parallaxslider.min.js` and `dist/css/pignose.parallaxslider.min.css` to your project folder.
### If you use npm
1. open a command line and type this
```shell
npm install pg-parallaxslider
```
## Usage
- [Check demo and documents](http://www.pigno.se/barn/PIGNOSE-ParallaxSlider/)
> Refer to below exhibit.
#### HTML
```html
```
#### Javascript
```javascript
$(window).load(function() {
$('#visual').pignoseParallaxSlider({
play : '.btn-play',
pause : '.btn-pause',
next : '.btn-next',
prev : '.btn-prev'
});
});
```
## Options
| name | value | default | description |
|------|-------|---------|-------------|
| speed | `number` | 1200 | the millisecond time for speed of the slide animation. |
| interval | `number` | 3000 | the millisecond time for interval of the slide animation. |
| direction | `string` | right | the direction of slide animation. |
| diffTime | `number` | 300 | the millisecond time that you want to put between main view and sub view as a parallax. |
| controlAnim | `boolean` | true | if you set this property to false, this plugin will ignore the status of animation queue. |
| pagination | `boolean` | true | if you set this property to true, pagination controller will show. |
| auto | `boolean` | true | if you set this property to true, this slider will start automatically. |
| isLocal | `boolean` | true | this property set that each of controllers(play, stop, prev and next) is belong local of those container or not. |
| play | `jQuery object` | null | the jQuery object of play button. |
| pause | `jQuery object` | null | the jQuery object of pause button. |
| next | `jQuery object` | null | the jQuery object of next button. |
| prev | `jQuery object` | null | the jQuery object of prev button. |
| afterMove | `callback` | null | this callback will be called after slider moved. |
## Issues
> We are wating for your requests.
Please report to us, If you find some problems.
Thank you!