Simple and Multi-Functional jQuery Slider Plugin - ulslide
File Size: | 410KB |
---|---|
Views Total: | 3778 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

ulslide is a simple but powerful jQuery plugin that helps you to create Multi-Functional sliders with vertical/horizontal sliding, fade, carousel, html5 rotation, and html5 scale effects. All the animation effects are customizable and simple to implement for quickly creating your own slider styles. I highly recommend checking the demo pages for more information.
More Examples:
- Vertical Sliding Example
- Horizontal Sliding Example
- Fade effect and Auto-sizing Example
- Horizontal Carousel with jQuery easing Example
- Vertical Carousel with jQuery easing Example
- HTML5 Rotate transform Example
- HTML5 Scale transform Example
- Crossfade effect Example
- Responsive Example
- 3D Flip effect Example
- 3D Cube effect Example
Basic Usage:
1. Include jQuery library and jQuery ulslide in the head section of your page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.ulslide.js"></script>
2. Include jQuery Mousewheel Plugin to add Mouse wheel support (optional)
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
3. Markup Html structure
<ul id="slide"> <li> <img src="photos/image-1.jpg" alt="" /> </li> <li> <img src="photos/image-2.jpg" alt="" /> </li> <li> <img src="photos/image-3.jpg" alt="" /> </li> <li> <img src="photos/image-4.jpg" alt="" /> </li> <li> <img src="photos/image-5.jpg" alt="" /> </li> </ul> <div id="slide-pager"> <a href="#" id="slide_prev">« prev</a> | <a href="#" id="slide_next">next »</a> </div>
4. Call the plugin with options
<script type="text/javascript"> $(function() { $('#slide').ulslide({ statusbar: true, width: 433, height: 290, nextButton: '#slide_next', prevButton: '#slide_prev', effect: { type: 'slide', // slide or fade axis: 'y', // x, y distance: 8 // Distance between frames }, mousewheel: true, duration: 400 }); }); </script>
5. The CSS
#slide { list-style: none outside none; overflow: hidden; width: 433px; height: 290px; padding: 0px; margin: 0 0 10px; } #slide-pager { clear: both; list-style-type: none; overflow: hidden; margin: 14px 0 16px; padding: 0; } #slide-pager li { float: left; } #slide-pager li a { margin: 0 2px; padding: 0 7px; border: 1px solid #ccc; display: inline-block; } #slide-pager li a.usl-current { text-decoration: underline; background-color: #e8e8e8; }
Change log:
v1.5.2 (2013-11-28)
- CSS3 3D efects added.
This awesome jQuery plugin is developed by yeeevhen. For more Advanced Usages, please check the demo page or visit the official website.