Carousel 1.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>

<section id="exampleWrapper" style="margin:30px;">
<div class="carousel" data-step="intElseDefaultsToAll-in-view" data-disable-auto-height="0">
<div class="carousel-title">Carousel 1.0.4</div>
                        <ul>
                            <li><div class="padded white"><img src="http://placehold.it/420x220" style="width:100%" alt="example" /><br />Item 1 Example<br />Your markup may differ.</div></li><!-- no spaces between inline blocks
                            --><li><div class="padded white"><img src="http://placehold.it/420x230" style="width:100%" alt="example" /><br />item 2</div></li><!--
                            --><li><div class="padded white"><img src="http://placehold.it/420x240" style="width:100%" alt="example" /><br />item 3</div></li><!--
                            --><li><div class="padded white"><img src="http://placehold.it/420x250" style="width:100%" alt="example" /><br />item 4</div></li><!--
                            --><li><div class="padded white"><img src="http://placehold.it/420x260" style="width:100%" alt="example" /><br />item 5<br />Carousel should resize height to only be as tall as the tallest cell in view</div></li><!--
                            --><li><div class="padded white"><img src="http://placehold.it/420x270" style="width:100%" alt="example" /><br />item 6</div></li><!--
                            --><li><div class="padded white"><img src="http://placehold.it/420x280" style="width:100%" alt="example" /><br />item 7</div></li>
                        </ul>
</div>


<p style="margin:30px 0; padding:15px; background-color:rgba(255,0,0,.2); border-radius:10px; border:2px solid red;">
    <strong>Settings</strong><br />
    Its a regular jQuery selector and you can pass settings but its easiest to just set the appropriate data-attributes:<br...

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 ul, .carousel li {
    -webkit-backface-visibility: hidden;/* needed to resolve rendering bug in safari 6.0.5 */
}
.carousel {
    display:block; 
    max-width:100%;
    overflow:hidden;
}
.carousel-title {display:block;}

.carousel ul{display:block; list-style:none; min-width:100%; border-top:1px solid #eee; overflow:hidden; white-space:nowrap; margin:0 -15px; padding:5px 0px; text-indent:0;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
}
.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 15px;}

.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: 650px) {
    .carousel li {
        width:33.333%;
    }
}
@media only screen and (max-width: 500px) {
    .carousel li {
        width:50%;
    }
}
@media only screen and (max-width: 300px) {
    .carousel li {
        width:100%;
    }
    .carousel-title {display:none;}
}

/* styles just for this demo */
html, body {margin:0;}
.carousel li > div {background-color:#eee; padding:10px;...

JavaScript

/*! Carousel 1.0.4
 * ==========================
 * @desc - 
 * @requires - jQuery 1.7+ | The associated css
 * @notes - TODO - touch detection
 */  
(function ($) {

    $.fn.carousel = function (options) {

        // default settings
        var settings = $.extend({
            step: "all-in-view", //int else defaults to all-in-view
            disableautoheight: 0, //resize height to fit deppest 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),
                ul = carousel.find("ul"),
                items = carousel.find("li"),
                count = items.length,
                firstItem = items.first(),
                lastItem = items.last(),
                step = carousel.data("step") || settings.step,
                autoheightdisabled = carousel.data("disable-auto-height") || settings.disableautoheight,
                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...