carousel test

by Danny_Joris

HTML

<div id="slider">
    <div class="prev control enabled"><<<</div>
        <div id="slider-inner">
            <ul class="wrap">  
                <li class='slide'><img src="http://lorempixum.com/100/150/" /></li>
                <li class='slide'><img src="http://lorempixum.com/100/151/" /></li>
                <li class='slide'><img src="http://lorempixum.com/100/152/" /></li>
                <li class='slide'><img src="http://lorempixum.com/100/153/" /></li>
                <li class='slide'><img src="http://lorempixum.com/100/154/" /></li>
                <li class='slide'><img src="http://lorempixum.com/100/155/" /></li>
                <li class='slide'><img src="http://lorempixum.com/100/156/" /></li>
                <li class='slide'><img src="http://lorempixum.com/100/157/" /></li>
                <li class='slide'><img src="http://lorempixum.com/100/158/" /></li>
                <li class='slide'><img src="http://lorempixum.com/100/159/" /></li>
                
                <li class='slide'><img src="http://lorempixum.com/100/160/" /></li>
                <li class='slide'><img src="http://lorempixum.com/100/161/" /></li>
                <li class='slide'><img src="http://lorempixum.com/100/162/" /></li>
                <li class='slide'><img src="http://lorempixum.com/100/163/" /></li>
                <li class='slide'><img src="http://lorempixum.com/100/164/" /></li>
                <li class='slide'><img src="http://lorempixum.com/100/165/" /></li>
                <li class='slide'><img src="http://lorempixum.com/100/166/" /></li>
                <li class='slide'><img src="http://lorempixum.com/100/167/" /></li>
                <li class='slide'><img src="http://lorempixum.com/100/168/" /></li>
                <li class='slide'><img src="http://lorempixum.com/100/169/" /></li>
                
                <li class='slide'><img src="http://lorempixum.com/100/170/" /></li>
            </ul>
        </div>
        <div class="next control...

CSS

#slider
{
    border: 1px red solid;
    float: left;
    width: 880px;
    height: 170px;
    padding: 20px 40px;
    position: relative;
}
#slider-inner
{
    width: 880px;
    position: relative;
    overflow: normal;
    
}
ul.wrap
{
    display: block;
    
    height: 170px;
    left: 0px;
    top: 0px;
    margin: 0px;
    padding: 0px;
    overflow: normal;
    position: relative;
    border: 1px green dotted;
}

li.slide
{
    background-color: #ddd;
    float: left;
    width: 110px;
    height: 170px;
    text-align: center;
    
    margin: 0px 1px;
    padding: 0px 3px;
    border: 1px dashed blue;
    position: absolute;
    top: 0px;
    
}
.prev
{
    float: left;
    left: 0px
}
.next
{
    float: right;
    right: 0px;
}
.control
{
    width: 40px;
    height: 25px;
    text-align: center;
    background-color: #666;
    color: #fff;
    cursor: pointer;
    position: absolute;
    top: 0px;
}
.disabled
{
    background-color: #ccc;
    
}


.none
{
    display: none;
}

JavaScript

$(document).ready(function() {

    // set current group ID
    var currGroupID = 1;

    // set groupID (will be the max of groupID's)
    var groupID;


    // set width amounts
    var itemCount = 4;
    var itemWidth = $('li.slide').outerWidth(true);
    var groupWidth = itemCount * itemWidth;
    var sliderInnerWidth = $('#slider-inner').width();
    var frameMargin = (sliderInnerWidth - groupWidth);
    var frameMarginLeft = frameMargin / 2;


    var groupMargin = 500; // or frameMargin?
    var slideWidth = groupWidth + groupMargin;

    var currGroupIDOffset = currGroupID * slideWidth;

    // set effects
    var slideDuration = 1500;
    var slideEasing = 'swing';
    var addTimeBuff = 60;



    // add left positioning to all slider elements
    $('.wrap li').each(function(index) {

        // set 'this'
        var $this = $(this);

        // set groupID
        groupID = Math.floor(index / itemCount, 10);

        // default difference
        var left = index * itemWidth;
        // original margin left difference     
        left = left + frameMarginLeft;
        // incremental difference after grouping
        var groupExtra = groupID * groupMargin;
        left = left + groupExtra;
        left = left - currGroupIDOffset;
        left = left + "px";

        $this.css({
            "left": left
        }).addClass('index-' + index).addClass('group-' + groupID).append("<b>" + groupID + "</b>");

        if (currGroupID === groupID) {
            $this.addClass('curr-slide');
        } else {
            $this.animate({"opacity": "0"}, 0, slideEasing);
        }
        if (currGroupID === (groupID - 1)) {
            $this.addClass('next-slide');
        }
        if (currGroupID === (groupID + 1)) {
            $this.addClass('prev-slide');
        }
        


    });





    // all groupID's are counted. Rename variable.
    var groupIDMax = groupID;

    // if the initial currGroupID is 0, disable the prev button.
    if (currGroupID === 0)...