Yet Another One Page Slider Plugin with jQuery - Wolfe.js

Yet Another One Page Slider Plugin with jQuery - Wolfe.js
File Size: 252 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Wolfe.js is another jQuery slider plugin for creating one page slider that allows to navigate through different sections of your page with smooth scrolling effects. Inspired by Apple's iPhone 5S website.

Features:

  • Simple and easy to use.
  • Mousewheel supported.
  • Pager/bullets navigation.
  • Configurable animation speed.
  • Responsive layout.

You might also like:

How to use it:

1. Create a set of page sections you want to scroll.

<div class="slide">
<h1>Section 1</h1>
</div>

<div class="slide">
<h2>Section 2</h2>
</div>

<div class="slide">
<h2>Section 3</h3>
</div>

<div class="slide">
...
</div>

...

2. Include the latest jQuery library and jQuery wolfe.js on the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="js/app.js"></script> 

3. Call the plugin with options.

<script type="text/javascript">
$( 'body').wolfe({
element: 'slide', // the class 
notes: false,
height: function() { 
  return page.height();
},
width: function() { 
  return page.width();
},
wrapper: 'wrapper',
speed: 1000,
onLoad: function() {},
onComplete: function() {}
});
</script>

This awesome jQuery plugin is developed by cmisura. For more Advanced Usages, please check the demo page or visit the official website.