Awesome

ViewportSlider

ViewportSlider is a pure JavaScript implementation of Apple's product page showcase (ie. http://www.apple.com/iphone-5c/).

Basic usage

First, you need to attach ViewportSlider stylesheet to your page:

<link rel="stylesheet" href="css/viewport-slider.css">

The next step is to reference the slider script and initialize the ViewportSlider object:

<script src="js/viewport-slider.js"></script>
<script>viewportSlider.init(document.getElementById('container'), '.slide');</script>

The above code will transform all the elements with the .slide class into full viewport slides and add a navigation behavior to them (either by using the mousewheel/trackpad and keyboard or by clicking on the navigation bullets). The initialization receives two parameters: the root element for the slides and the slides' class name.

Touch Support

To enable swipe pagination, ViewportSlider uses the awesome Hammer Library. You need to reference it manually. The lib directory includes the latest version:

<script src="js/hammer.min.js"></script>
<script src="js/viewport-slider.js"></script>
<script>viewportSlider.init(document.getElementById('container'), '.slide');</script>

Development

ViewportSlider development tasks are managed by Grunt. To install all the necessary packages, just invoke:

npm install

These are the available grunt tasks:

• js: runs jslint and jasmine tests and creates minified and concatenated versions of the script;
• css: runs compass and csslint
• test: runs jasmine tests, jslint and csslint
• watch: watch for modifications on script/scss files

The source files are located inside the src directory. ViewportSlider stylesheet was created using sass/compass, make sure you have the compass gem installed on your system.

License

"THE BEER-WARE LICENSE" (Revision 42):

As long as you retain this notice you can do whatever you want with this stuff. If we meet some day, and you think this stuff is worth it, you can buy me a beer in return.