Minimalist jQuery Slider Plugin - Slider Lite

Slider Lite is a basic jQuery slider plugin which allows to slide through Html contents vertically or horizontal.

How to use it:

1. Include the jQuery library and jQuery slider lite plugin in the page.

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

2. Wrap the html elements you want to slide in a container.

<div class="slide">
<div class="slide-inner">
<div class="item active"><img src="1.jpg" alt=""></div>
<div class="item"><img src="2.jpg" alt=""></div>
<div class="item"><img src="3.jpg" alt=""></div>
</div>
<a href="#" class="slide-nav next">Next</a> 
<a href="#" class="slide-nav prev">Prev</a> 
</div>

3. The sample CSS to style the slider.

.slide, .slide-inner {
position: relative;
overflow: hidden;
height: 460px;
}
.slide .item {
display: none;
position: absolute;
width: 100%;
height: 100%;
}
.slide .item.active {
display: block;
}
.slide .item > img {
display: block;
max-width: 100%;
}
.slide-nav {
position: absolute;
top: 50%;
display: block;
height: 50px;
width: 50px;
color: #fff;
background-color: #333;
opacity: .8;
line-height: 50px;
text-align: center;
}
.slide-nav.prev {
left: 0;
}
.slide-nav.next {
right: 0;
}

4. Call the plugin with options.

<script>
$('.slide').slide({
speed: 0.8, // transition speed
delay: 3, // delay time
direction: 'left', // left, right, top or bottom
easing: 'swing', // easing effect
start: 0, 
next: 1,
autoplay: true, // auto play on load
itemClass: '.item',
navClass: '.slide-nav'
});
</script>

---

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