theAtlantic.com carousel

by pixeline

HTML

<div id="carousel" class="carousel fade" data-vr-zone="Carousel" data-omni-click="r'carousel',@data-slide-num,r'e',@href">
	<div class="carousel-inner">
				<article class="item active" data-slide-num="0" data-vr-contentbox="Carousel1">
			<a href="http://www.theatlantic.com/business/archive/2013/02/how-the-job-market-for-law-school-grads-crumbled-and-how-it-could-come-back-to-life/272852/" data-omni-click="inherit" data-slide-num="0">
				<img src="http://cdn.theatlantic.com/static/newsroom/img/2013/02/05/AP120529138535/home-article-curation-carousel.jpg?mhr8og" 
					 width="650"
					 height="375" />
				<header>
					<h1>How the Job Market for Law School Grads Crumbled</h1>
					<span class="dek">The story of what was once one of the most competitive markets--and how it could come back to life. <br></span>
					<span class="authors">By <span class="authors"><span class="author">Jordan Weissmann</span></span></span>
				</header>
			</a>
		</article>
				<article class="item " data-slide-num="1" data-vr-contentbox="Carousel2">
			<a href="http://www.theatlantic.com/business/archive/2013/02/the-endangered-fate-of-barnes-noble/272865/" data-omni-click="inherit" data-slide-num="1">
				<img src="http://cdn.theatlantic.com/static/newsroom/img/2013/02/05/b&n/home-article-curation-carousel.jpg?mhrlgk" 
					 width="650"
					 height="375" />
				<header>
					<h1>The Endangered Fate of Barnes & Noble</h1>
					<span class="dek">Is this simply a tough transition, or the beginning of the end?</span>
					<span class="authors">By <span class="authors"><span class="author">Peter Osnos</span></span></span>
				</header>
			</a>
		</article>
				<article class="item " data-slide-num="2" data-vr-contentbox="Carousel3">
			<a href="http://www.theatlantic.com/health/archive/2013/02/what-are-perfect-teeth/272833/" data-omni-click="inherit" data-slide-num="2">
				<img...

CSS

#carousel {
    width: 650px;
    height: 523px;
    float: left;
    background-color: black;
    position: relative;
    margin-bottom: 20px;
    line-height: 1;
    font-family: arial;
}

#carousel,
#carousel a,
#carousel a:link,
#carousel a:active,
#carousel a:visited {
    color: #fff;
    text-decoration: none;
}

#carousel .carousel-inner {
    overflow: hidden;
    width: 650px;
    height: 523px;
    position: relative;
}
#carousel nav {
    margin: 8px 15px 4px 15px;
    border-top: solid 1px #FFF400;
    position: absolute;
    bottom: 0;
    z-index: 2;
}
#carousel nav a {
    display: block;
    width: 138px;
    height: 45px;
    padding: 8px;
    line-height: 15px;
    float: left;
    text-align: center;
    position: relative;
}
#carousel nav a.active {
    color: gray;
}
#carousel nav a.active .hat {
    background: #FFF400;
    width: 65px;
    height: 4px;
    display: block;
    position: absolute;
    top: -2px;
    left: 42px;
}

#carousel article.item {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 650px;
    height: 523px;
}

#carousel article.item a {
    display: block;
    width: 650px;
}

#carousel article.item .authors,
#carousel article.item .authors .author {
    text-transform: uppercase;
    color: #fff;
}
#carousel article.item header {
    text-align: center;
    position: absolute;
    bottom: 82px;
    background: #000;
    width: 650px;
    left: 50%;
    margin-left: -325px;
    padding: 8px 10px 0 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
#carousel article.item header h1 {
    font-weight: normal;
    font-family: times;
    font-size: 30px;
    padding-bottom: 8px;
    letter-spacing: 1px;
}
#carousel article.item > img {
    display: block;
    line-height: 1;
}
#carousel article.item .dek {
    line-height: 18px;
}
#carousel article.item.active {
    display: block;
}
#carousel a.carousel-control {
    position: absolute;
    top: 40%;
    left: 15px;
   ...

JavaScript

(function($) {

    "use strict";

    /* CSS TRANSITION SUPPORT (http://www.modernizr.com/)
     * ======================================================= */

    $(function() {

        $.support.transition = (function() {

            var transitionEnd = (function() {

                var el = document.createElement('bootstrap'),
                    transEndEventNames = {
                        'WebkitTransition': 'webkitTransitionEnd',
                        'MozTransition': 'transitionend',
                        'OTransition': 'oTransitionEnd otransitionend',
                        'transition': 'transitionend'
                    },
                    name;

                for (name in transEndEventNames) {
                    if (el.style[name] !== undefined) {
                        return transEndEventNames[name];
                    }
                }

            }());

            return transitionEnd && {
                end: transitionEnd
            };

        })();

    });

})(window.jQuery);



/* ==========================================================
 * bootstrap-carousel.js v2.2.1
 * http://twitter.github.com/bootstrap/javascript.html#carousel
 * ==========================================================
 * Copyright 2012 Twitter, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ========================================================== */


/* ==========================================================
 * bootstrap-carousel.js...