iOS Style Vertically Rolling List View with jQuery - WSlot

WSlot is a jQuery plugin for generating a scrolling / rolling list view that allows the visitor to select a value by rotating the list vertically with the mouse or touch gestures. Similar to the iOS date picker component. Based on CSS3 transforms and Window.requestAnimationFrame() web API.

How to use it:

1. Download the WSlot plugin and include the jQuery.WSlot.js script just before the end body tag in your html.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jQuery.WSlot.js"></script>

2. Create a container to place the scrolling list.

<div class="container">
</div>

3. Generate a basic scrolling list from an array of items.

('.container').WSlot({
  items: ['one','two','three','four']
});

4. All plugin options with default values.

('.container').WSlot({
  items : [], 
  center : 'first',
  distance : 'auto',
  displayed_length : 2,
  angle : 30,
  rotation : 0,
  item_height : 20,
});

5. API methods.

// get current item
WSlot('get');

// get current text
WSlot('getText');

// roll to item n
WSlot('rollTo',n);

Change log:

2015-12-08

• use -webkit-transform for safari

---

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