https://github.com/kennethanceyer/parallax-slider

:foggy: awesome parallax slider
https://github.com/kennethanceyer/parallax-slider

Last synced: about 6 hours 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 (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2017-08-03T14:23:16.000Z (about 7 years ago)
• Last Synced: 2024-09-15T12:49:13.537Z (18 days ago)
• Language: JavaScript
• Homepage: http://www.pigno.se/barn/PIGNOSE-ParallaxSlider/
• Size: 2.99 MB
• Stars: 14
• Watchers: 5
• 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.

[![npm version](https://badge.fury.io/js/pg-parallaxslider.svg)](https://badge.fury.io/js/pg-parallaxslider) [![Bower version](https://badge.fury.io/bo/pg-parallaxslider.svg)](https://badge.fury.io/bo/pg-parallaxslider) [![Join the chat at https://gitter.im/KennethanCeyer/PIGNOSE](https://badges.gitter.im/Join%20Chat.svg)](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!

![Sample](http://www.pigno.se/barn/PIGNOSE-ParallaxSlider/demo/img/screenshot_main.png)

## 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!