Mobile Carousel

4 panels

by tonytlwu

HTML

<script src="http://hammerjs.github.io/dist/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0" />
<div id="carousel">
    <div class="slides">
        <div class="slide" data-state="past">
            <img src="http://lorempixel.com/328/447/technics/1" />
            <img src="http://lorempixel.com/328/447/technics/2" />
            <span></span>
        </div>
        <div class="slide" data-state="present">
            <img src="http://lorempixel.com/328/447/technics/3" />
            <img src="http://lorempixel.com/328/447/technics/4" />
            <span></span>
        </div>
        <div class="slide" data-state="future">
            <img src="http://lorempixel.com/328/447/technics/5" />
            <img src="http://lorempixel.com/328/447/technics/6" />
            <span></span>
        </div>
        <div class="slide" data-state="future-far">
            <img src="http://lorempixel.com/328/447/technics/7" />
            <img src="http://lorempixel.com/328/447/technics/8" />
            <span></span>
        </div>
    </div>
    <div class="nav prev"></div>
    <div class="nav next"></div>
</div>
<pre id="debug"></pre>

CSS

body {
    margin: 0;
    position: relative;
    width: 100%;
    height: 100%;
    background: url(http://review.atmospherebbdo.com/Citi/sales_wall/wip/images/bg_body.png) left top repeat-x;
}

#carousel {
    position: absolute;
    top: 175px;
    bottom: 0;
    left: 192px;
    right: 0;
    display: block;
}

.slides {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.slide {
    width: 328px;
    height: 447px;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    overflow: hidden;
    -webkit-transition: -webkit-transform 750ms ease;
    transition: transform 750ms ease;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: #000;
}

.slide[data-state="past"]       {
    -webkit-transform: translate3d(20%,0,0) scale(0.7);
    z-index: 0;
}
.slide[data-state="present"]    {
    -webkit-transform: translate3d(60%,0,0);
    z-index: 2;
}
.slide[data-state="future"]     {
    -webkit-transform: translate3d(135%,0,0) scale(0.7);
    z-index: 1;
}
.slide[data-state="future-far"] {
    -webkit-transform: translate3d(185%,0,0) scale(0.5);
    z-index: 0;
}

.slide img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: -webkit-transform 350ms ease;
    transition: transform 350ms ease;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.slide[data-state="present"] img {
    opacity: 1 !important;
}

.slide img:nth-child(2) {
    opacity: 0.5;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.slide.active img {
    opacity: 0.5;
}

.slide.active img:nth-child(2) {
    -webkit-transform: translate3d(100%,0,0);
}

.slide span {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: none;
}
.slide[data-state="present"] span {
    display:...

JavaScript

/*****************  Carousel  *****************/
/*****************  Carousel  *****************/
/*****************  Carousel  *****************/

var Carousel = (function() {
	// this reference
	var _this;

	// Constructor
	function Carousel($container) {
		_this = this;
        this.init_($container);
        this.attachObservers_();
	}
	
	Carousel.prototype = {
		constructor : Carousel,
        
        ENABLE_THROTTLE : true,
		
		// Public variables
		$container : null,
        $slides : null,
        $prev : null,
        $next : null,
        slideCount : 0,
        activeSlideIndex : 0,
        sliding : false,
        slidingTime : 750,
        slideTimer : null,
        direction : ''
	};
	
	// Private variables
	var initialSlideIndex = 1; // 0-indexed
    var directionMap = {
        '0' : {
            '1' : 'next',
            '2' : 'next,next',
            '3' : 'prev'
        },
        '1' : {
            '2' : 'next',
            '3' : 'next,next',
            '0' : 'prev'
        },
        '2' : {
            '3' : 'next',
            '0' : 'next,next',
            '1' : 'prev'
        },
        '3' : {
            '0' : 'next',
            '1' : 'next,next',
            '2' : 'prev'
        }
    };
	
	// Public functions	
	Carousel.prototype.go = function(i) {
        if (!this.sliding || !this.ENABLE_THROTTLE) {
            var actions = directionMap[this.activeSlideIndex][i].split(',');
            if (actions.length) {
                if (actions.shift() === 'next') {
                    this.next();
                    if (actions.length) {
                        if (actions.shift() === 'next') {
                            setTimeout(function(){ _this.next(); }, _this.slidingTime);
                        } else {
                            setTimeout(function(){ _this.prev(); }, _this.slidingTime);
                        }
                    }
                } else {
                    this.prev();
                    if...