Basic jQuery Content Slider/Carousel Plugin - Simple Slider

Simple Slider is an ultra-lightweight jQuery plugin that allows you to slide through a series of Html contents like a carousel that supports auto play and infinite loop.

How to use it:

1. Load the required jQuery javascript library in your Html page.

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

2. Create the Html for a content slider/carousel with arrows navigation.

<div id="slider"> 
<a href="#" class="control_next">>></a> 
<a href="#" class="control_prev"><<</a>
<ul>
<li>SLIDE 1</li>
<li>SLIDE 2</li>
<li>SLIDE 3</li>
<li>SLIDE 4</li>
</ul>
</div>

3. You can also add 2 buttons to control the slider/carousel.

<div class="slider_option">
<input type="button" id="buttonplay" class="button" value="Play Slider">
<br />
<input type="button" id="buttonstop" value="Stop Slider">
</div>

4. The required CSS to style the slider/carousel.

#slider {
position: relative;
overflow: hidden;
margin: 20px auto 0 auto;
border-radius: 4px;
}
#slider ul {
position: relative;
margin: 0;
padding: 0;
height: 200px;
list-style: none;
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 800px;
height: 350px;
background: #ccc;
text-align: center;
line-height: 300px;
}
a.control_prev, a.control_next {
position: absolute;
top: 34%;
z-index: 999;
display: block;
padding: 4% 3%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 25px;
opacity: 0.4;
cursor: pointer;
}
a.control_prev:hover, a.control_next:hover {
opacity: 0.8;
-webkit-transition: all 0.2s ease;
}
a.control_prev {
border-radius: 0 2px 2px 0;
}
a.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}
.slider_option {
margin-left: auto;
margin-right: auto;
margin-top: 50px;
width: 570px;
height: 600px;
}
input[type=button] {
display: block;
background: transparent;
box-shadow: inset 0 0 0 2px white;
border: 2px solid white;
color: white;
padding: 15px;
font-size: 18px;
margin-left: auto;
margin-right: auto;
text-align: center;
}

5. Add the following Javascript snippet in your page or include the script.js directly.

$(document).ready(function ($) {
    
    $('#buttonplay').click(function(){
        sliderInit = setInterval(moveRight, 3000);
    }); //when user clicks "Play Slider" button, slider will start moving automatically

    $('#buttonstop').click(function(){
        clearInterval(sliderInit);
    }); //when user clicks "Stop Slider" button, slider will stop
    
    var slideCount = $('#slider ul li').length;
    var slideWidth = $('#slider ul li').width();
    var slideHeight = $('#slider ul li').height();
    var sliderUlWidth = slideCount * slideWidth;//variables to determine slider width and height
    
    $('#slider').css({ width: slideWidth, height: slideHeight }); 
    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
    $('#slider ul li:last-child').prependTo('#slider ul');

    function moveLeft() {
        $('#slider ul').animate({
            left: + slideWidth
        }, 400, function () {
            $('#slider ul li:last-child').prependTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };//moves slider left through slider window

    function moveRight() {
        $('#slider ul').animate({
            left: - slideWidth
        }, 400, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('left', '');
        });
    };//moves slider right through slider window

    $('a.control_prev').click(function () {
        moveLeft();
    });//manual control to move slides left

    $('a.control_next').click(function () {
        moveRight();
    });//manual control to move slides right

});    

---

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