Minimalist jQuery Content Slider Plugin - Simple Slider

Simple Slider is an extremely lightweight and fast jQuery plugin for creating a Content Slider with basic navigation, pagination, auto-play and animation support.

How to use it:

1. Include jQuery library and jQuery Simple Slider on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="js/libs/simpleslider.js" type="text/javascript"></script>

2. Create the html

<div id="slider-container">
<div class="slider-holder">
<ul>
<li class="slider-item" data-slider-number="0">1</li>
<li class="slider-item" data-slider-number="1">2</li>
<li class="slider-item" data-slider-number="2">3</li>
<li class="slider-item selected" data-slider-number="3">4</li>
<li class="slider-item" data-slider-number="4">5</li>
<li class="slider-item last" data-slider-number="5">6</li>
</ul>
</div>
</div>

3. The CSS

#slider-container {
position: relative;
}
.slider-holder .slider-item {
background: #000;
width: 400px;
height: 300px;
margin: 0 15px 0 0;
font-size: 30px;
text-align: center;
color: #FFF;
}
.slider-holder ul {
position: relative;
height: 150px;
}
.slider-holder .slider-item.last {
margin: 0;
}
#slider-container #left-btn {
position: absolute;
left: 0;
margin: 0 25px 0 0;
}
#slider-container #left-btn span {
background: url('../images/Arrow-left-32.png') 0 0 no-repeat;
width: 32px;
height: 32px;
float: left;
}
#slider-container #right-btn {
position: absolute;
right: 0;
}
#slider-container #right-btn span {
background: url('../images/Arrow-right-32.png') 0 0 no-repeat;
width: 32px;
height: 32px;
float: left;
margin: 0 0 0 25px;
}
#slider-container .slider-pagination {
position: absolute;
left: 60px;
margin: 20px 0 0;
}
#slider-container .slider-pagination li {
float: left;
margin: 0 5px 0 0;
}
#slider-container .slider-pagination li a {
display: block;
width: 20px;
height: 20px;
border-radius: 10px;
background: #000;
}
#slider-container .active {
box-shadow: 0 0 10px #F00;
}

4. The javascript

<script type="text/javascript">
$(document).ready(function() {
$('#slider-container').simpleslider({
animateSpeed: 1000,
navigationItems: {
arrows: {
enabled: true,
isStartAllArrows: true,
leftArrow: {
btnId: 'left-btn',
btnString: ''
},
rightArrow: {
btnId: 'right-btn',
btnString: ''
}
},
pagination: {
enabled: true,
properties: {
listContainerClass: 'slider-pagination',
isDiplayNumber: false
}
}
},
autoPlayProperties: {
enabled: false,
timeValue: 1000
},
displayShowItemNumber: 1
});
});
</script>

---

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