Simple slider for all kind of content

A very simple way to create a slider menu. All kind of content can be stored in div container. Easily extensible to additional content. No IDs required.

by scurrilus

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<link rel="stylesheet" href="http://scurrilus.de/scurrilus-jsfiddle/scurrilus-copyright.css">
<script src="http://scurrilus.de/scurrilus-jsfiddle/scurrilus-copyright.js"></script>
<!--powered by SCURRILUS-->
<div id="scurrilusCopy"></div>
<script>scurrilusCopy();</script>
<!--end powered by SCURRILUS-->

<div class="code">
    <div class="valueOutput"></div><br/>
    <div class="slider">
        <ul>
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <section class="content">
            <div>CONTENT 1</div>
            <div>CONTENT 2</div>
            <div>CONTENT 3</div>
            <div>CONTENT 4</div>
        </section>
    </div>
</div>

CSS

.slider {
    width: 100%;
    height: 300px;
    padding: 10px;
    box-sizing: border-box;
    background: #ccc;   
}

ul {
    padding: 0;
}

li {
    width: 30px;
    height: 15px;
    text-align: center;
    list-style: none;
    float:left;
    background: #f6f6f6;
    padding: 5px;
    margin-right: 10px;
    cursor: pointer
}

section {
    overflow: hidden;
    top: 10px;
    width: 100%;
    height: 300px;
    display: block;
    position: relative;
}

section div {
    width: 98%;
    height: 235px;
    background: #999;
    border:3px solid #666;
    box-sizing: border-box;
    padding-top: 90px;
    text-align: center;
    position: absolute;
    left: 100%;
    border-radius: 10px;
    margin-left: 1%;
    margin-right: 1%;
}

section div:first-child {
    left: 0;
}

.current {
    background: #999999;
}

JavaScript

// This is an example for how it work.
// We get the child number of clicked "li" and 
// get the child number of li element with class "current".
// The child number of clicked "li" is higher or lower then li with class current.
// Then we animate the div containers in section "content" by child number.

// slide Up and Down duration in milliseconds
var slideDuration = 500;

// required jquery easing plugin: 
// http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js
// easeInSine, easeInOutQuint, easeOutBounce
// more: http://easings.net/de
var easing = "easeInOutBack";

// This is the class of our content section. 
// Please change if your content has an other class name.
var contentClass = "content";

// Slide content by click on tabs. 
// For this we use a jquery click function

$('li').click(function() {    
    // Get li child number of clicked li and get child 
    // number of li with class "current".
    var clickedBoxIDNum = $(this).parent().children().index(this);
    var currentBoxIDNum = $('li.current').index();
    console.log(clickedBoxIDNum);
    console.log(currentBoxIDNum);
    
    // lets run some loops
    // We have unique numbers. This we can compare now.
    if (clickedBoxIDNum > currentBoxIDNum) {
        // console.log('higher ID');
        
        // Change current status of clicked li
        if($('li').hasClass('current')) {
           $('li').removeClass('current');
           $(this).addClass('current');
        }
        
        // Reset position of new content box
        $('.' + contentClass + ' div:eq(' + clickedBoxIDNum + ')').css({left: "100%"});
        
        // slide current and new content box
        $('.' + contentClass + ' div:eq(' + clickedBoxIDNum + ')').animate({left: "0"}, slideDuration, easing);
        $('.' + contentClass + ' div:eq(' + currentBoxIDNum + ')').animate({left: "-100%"}, slideDuration, easing);   
    }
    
    if (clickedBoxIDNum < currentBoxIDNum) {
         //...