Carousel DEV 0.4

by moob

HTML

<div style="height:50px; text-indent:-1000px; overflow:hidden;">Inline div just to push the content away from the 'result' button in the corner of the jsFiddle pane.</div>
<div class="carousel" data-step="all">
    <div class="carousel-title">Flex Carousel</div>
    <ul>
        <li><div>item 1</div></li><!--
        --><li><div>item 2</div></li><!--
        --><li><div>item 3</div></li><!--
        --><li><div>item 4</div></li><!--
        --><li><div>item 5<br />sdsdsd<br /></div></li><!--
        --><li><div>item 6</div></li><!--
        --><li><div>item 7</div></li>
    </ul>
</div>

CSS

/* apply a natural box layout model to all elements */
.carousel, .carousel *, .carousel:before, .carousel:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.carousel {
    display:block; 
    max-width:100%;
    overflow:hidden;
}
.carousel-title {font-size:1.5em; color:#666; text-transform:uppercase; display:block;}

.carousel ul{display:block; list-style:none; min-width:100%; border-top:1px solid #eee; overflow:hidden; white-space:nowrap; margin:0 -10px; padding:5px 0px; text-indent:0;
}
.carousel li {display:inline-block; vertical-align:top; margin:0; width:25%; white-space:normal; background:none; border:0px dotted red;
    -webkit-transition: all 600ms;
    -moz-transition: all 600ms;
    -o-transition: all 600ms;
    transition: all 600ms;
}
.carousel li {width:25%;}
.carousel li > div {margin:0 10px; background-color:#eee; border:1px solid #333;}

.carousel-button-wrapper {
    display:block; position:relative; float:right;
}

a[href^="#carousel-button"]{
display:inline-block; padding:5px; margin:0 0 5px 5px; background-color:#eee; text-align:left; border:1px solid #666;
    text-decoration:none;
}
a[href^="#carousel-button"].frozen{
    filter: alpha(opacity=50);
    opacity: 0.5;
    cursor: not-allowed;
}



@media only screen and (max-width: 500px) {
    .carousel li {
        width:33.333%;
    }
}
@media only screen and (max-width: 360px) {
    .carousel li {
        width:50%;
    }
    .carousel-title {display:none;}
}
@media only screen and (max-width: 200px) {
    .carousel li {
        width:100%;
    }
}

JavaScript

/*! Carousel 0.4
 * ==========================
 * @desc - 
 * @requires - jQuery 1.7+ | The associated css (carousel.0.1.css)
 * @notes - 
 */  
(function ($) {

    $.fn.carousel = function (options) {

        // default settings
        var settings = $.extend({
            step: "all-in-view", //int else defaults to all-in-view 
            ready: null //optional function callback once initialised
        }, options);

        return this.each(function () {

            var carousel = $(this),
                items = carousel.find("li"),
                count = items.length,
                firstItem = items.first(),
                lastItem = items.last(),
                step = carousel.data("step") || settings.step,
                index = 0,
                itemWidthInPercent = getItemWidthInPercent();
            
            //step (step may be an int as passed or equal to number of items in view (default)
            function getStep(reversing){
                itemWidthInPercent = getItemWidthInPercent();
                var stp = carousel.data("step") || settings.step;
                if(!$.isNumeric(s)){//NaN?.. step is equal to number of items in view
                    stp = Math.floor(100/itemWidthInPercent);       
                }                
                var s = stp;
                var remaining = count-index;
                if(!reversing && remaining - s < s){s=remaining - s;}
                if(reversing && index - s < 0){s=index;}
                if(reversing && s==0){s=stp;}
                console.log("s="+s);
                return s
            }
            step = getStep();

            //tests
            console.log(step);
            console.log(items.length);

            //add controls
            var buttonholder = $("<div class='carousel-button-wrapper'/>");
            var nextbutton = $("<a href='#carousel-button-next'> > </a>");
            var prevbutton = $("<a href='#carousel-button-prev'> < </a>");
           ...