Basic jQuery Content Slider/Carousel Plugin - Simple Slider

File Size: 3.11 KB
Views Total: 2707
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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=""></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>
<li>SLIDE 1</li>
<li>SLIDE 2</li>
<li>SLIDE 3</li>
<li>SLIDE 4</li>

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">

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 ($) {
        sliderInit = setInterval(moveRight, 3000);
    }); //when user clicks "Play Slider" button, slider will start moving automatically

    }); //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 () {
    });//manual control to move slides left

    $('a.control_next').click(function () {
    });//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.