JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<div id="showcase">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
        </ul>
    </div>

CSS

/* http://meyerweb.com/eric/tools/css/reset/     v2.0 | 20110126    License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {   margin: 0;   padding: 0;   border: 0;   font-size: 100%;   font: inherit;   vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {   display: block; } body {   line-height: 1; } ol, ul {   list-style: none; } blockquote, q {   quotes: none; } blockquote:before, blockquote:after, q:before, q:after {   content: '';   content: none; } table {   border-collapse: collapse;   border-spacing: 0; } body {   background: red; } 

#showcase {   background: #eee;   width: 600px;   height: 300px;   position: relative; top:100px; left:200px; margin: 0 auto; } 
#showcase li {   width: 100px;   height: 100px;   display: block;   position: absolute;   color: red; } 
#showcase li:nth-child(1) {   background: #000;   z-index: 7; } 
#showcase li:nth-child(2) {   background: #222;   margin-left: 125px;   z-index: 6;   width: 75px;   height: 75px; } 
#showcase li:nth-child(3) {   background: #444;   margin-left: 210px;   z-index: 5;   width: 50px;   height: 50px; } 
#showcase li:nth-child(4) {   background: #666;   margin-left: 85px; width: 30px;   height: 30px;  z-index: 3; } 
#showcase li:nth-child(5) {   background: #888;   margin-left: -25px;  width: 30px;   height: 30px; z-index: 3; } 
#showcase li:nth-child(6) {   background: #aaa;   margin-left: -185px;   z-index: 5;   width: 50px; ...

JavaScript

jQuery(document).ready(function($) {
    var side_item_count = 2;
    var currItem = 1;
    var item_count = $("#showcase li").size();
    var history_width = get_history_width();
    var history_height = get_history_height();
    var history_margin = get_history_css("margin");
    var history_zindex = get_history_css("zindex");
    
    console.log(history_width);
    console.log(history_height);
    console.log(history_margin);

    $("#showcase li").live("click", function(){
        if(currItem == item_count){
            currItem = 1;
        }else{
            currItem++;
        }
        step_loop( currItem );
    });
    
    function step_loop(this_index) {
        $('#showcase li').each(function(index) {
            counter = index + 1;
            step_animate(this_index, counter);
        });
    }
    
    function step_animate( current_index, counter ) {
        current_object = $('#showcase li:nth-child(' + counter + ')');
        next_index = counter + 1 - currItem;
        if((counter - currItem) < 0){ 
            next_index = (counter - currItem) + item_count + 1;
            console.log("-- " + next_index);
        }else{
            console.log(counter + " + 1 - " + currItem + " = " + next_index);
        }
        
        var next_width = history_width[next_index];
        var next_height = history_height[next_index];
        var next_margin = history_margin[next_index];
        var next_zindex = history_zindex[next_index];
        
        $(current_object).css("zIndex", next_zindex).animate({
            marginLeft: next_margin,
            width: next_width,
            height: next_height,
            }, 500, function() {
                // Animation complete.
        });
    }
    
    function get_history_width() {
        var width = new Array();
        $('#showcase li').each(function(index) {
            counter = index + 1;
            width[counter] = $('#showcase li:nth-child(' + counter + ')').css('width');
        });
       ...