Carousel DEV 0.6

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="1">
    <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.resizing li {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
}
.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 1.0
 * ==========================
 * @desc - 
 * @requires - jQuery 1.7+ | The associated css (carousel.1.0.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);
        
        //browser duck-typing (only needed because Safari is terrible):
        var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;// Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
        var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
        var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;// At least Safari 3+: "[object HTMLElementConstructor]"
        var isChrome = !!window.chrome && !isOpera;// Chrome 1+
        var isIE = /*@cc_on!@*/false || !!document.documentMode;// At least IE6

        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(),
                itemsInView = Math.floor(100/itemWidthInPercent),
                buttonholder = $("<div class='carousel-button-wrapper'/>"),
                nextbutton = $("<a href='#carousel-button-next'> > </a>"),
                prevbutton = $("<a href='#carousel-button-prev'> < </a>"); 
            
            //step (step may be an int as passed or equal to number of items in view (default)
            function getStep(reversing){
                itemWidthInPercent = getItemWidthInPercent();
                itemsInView =...