Simple and Multi-Functional jQuery Slider Plugin - ulslide

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">&laquo; prev</a> | <a href="#" id="slide_next">next &raquo;</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.