Minimalist jQuery Slider Plugin - Slider Lite

File Size: 40.1KB
Views Total: 758
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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=""></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>
<a href="#" class="slide-nav next">Next</a> 
<a href="#" class="slide-nav prev">Prev</a> 

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 {
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;
} {
right: 0;

4. Call the plugin with options.

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'

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