kkxlkkxllb · October 10, 2013 03:43
diff --git a/carousel.html b/carousel.html
 <!DOCTYPE html>
 <html>
 <head>
    <title>Hammer.js</title>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
    <style>

        html, body, #carousel, #carousel ul, #carousel li {
            min-height: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            position: relative;
        }

        #debug {
            position: fixed;
            background: #fff;
            padding: 5px;
            color: #000;
            top: 0;
            left: 0;
            z-index: 1337;
        }

        #carousel {
            background: silver;
            overflow: hidden;
            width:100%;
            -webkit-backface-visibility: hidden;
            -webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
            -webkit-transform-style: preserve-3d;
        }

        #carousel ul.animate {
            -webkit-transition: all .3s;
            -moz-transition: all .3s;
            -o-transition: all .3s;
            transition: all .3s;
        }

        #carousel ul {
            transform: translate3d(0%,0,0) scale3d(1,1,1);
            -o-transform: translate3d(0%,0,0) scale3d(1,1,1);
            -ms-transform: translate3d(0%,0,0) scale3d(1,1,1);
            -moz-transform: translate3d(0%,0,0) scale3d(1,1,1);
            -webkit-transform: translate3d(0%,0,0) scale3d(1,1,1);
            overflow: hidden;
            -webkit-backface-visibility: hidden;
            -webkit-transform-style: preserve-3d;
        }

        #carousel ul {
            -webkit-box-shadow: 0 0 20px rgba(0,0,0,.2);
            box-shadow: 0 0 20px rgba(0,0,0,.2);
            position: relative;
        }

        #carousel li {
            float: left;
            overflow: hidden;
            -webkit-transform-style: preserve-3d;
            -webkit-transform: translate3d(0,0,0);
        }

        #carousel li h2 {
            color: #fff;
            font-size: 30px;
            text-align: center;
            position: absolute;
            top: 40%;
            left: 0;
            width: 100%;
            text-shadow: -1px -1px 0 rgba(0,0,0,.2);
        }

        #carousel li.pane1 { background: #42d692; }
        #carousel li.pane2 { background: #4986e7; }
        #carousel li.pane3 { background: #d06b64; }
        #carousel li.pane4 { background: #cd74e6; }
        #carousel li.pane5 { background: #9fe1e7; }

    </style>
 </head>

 <body>

    <!--<div id="debug">Log</div>-->

    <div id="carousel">
        <ul>
            <li class="pane1"><h2>Swipe...</h2></li>
            <li class="pane2"><h2>...or drag...</h2></li>
            <li class="pane3"><h2>...or swipe...</h2></li>
            <li class="pane4"><h2>..or drag...</h2></li>
            <li class="pane5"><h2>Dit is het einde!</h2></li>
        </ul>
    </div>


    <!-- jQuery is just for the demo! Hammer.js works without jQuery :-) -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="assets/js/modernizr.js"></script>

    <script src="../dist/jquery.hammer.js"></script>

    <script>

    var debug_el = $("#debug");
    function debug(text) {
        debug_el.text(text);
    }


    /**
     * requestAnimationFrame and cancel polyfill
     */
    (function() {
        var lastTime = 0;
        var vendors = ['ms', 'moz', 'webkit', 'o'];
        for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
            window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
            window.cancelAnimationFrame =
                    window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
        }

        if (!window.requestAnimationFrame)
            window.requestAnimationFrame = function(callback, element) {
                var currTime = new Date().getTime();
                var timeToCall = Math.max(0, 16 - (currTime - lastTime));
                var id = window.setTimeout(function() { callback(currTime + timeToCall); },
                        timeToCall);
                lastTime = currTime + timeToCall;
                return id;
            };

        if (!window.cancelAnimationFrame)
            window.cancelAnimationFrame = function(id) {
                clearTimeout(id);
            };
    }());


    /**
    * super simple carousel
    * animation between panes happens with css transitions
    */
    function Carousel(element)
    {
        var self = this;
        element = $(element);

        var container = $(">ul", element);
        var panes = $(">ul>li", element);

        var pane_width = 0;
        var pane_count = panes.length;

        var current_pane = 0;


        /**
         * initial
         */
        this.init = function() {
            setPaneDimensions();

            $(window).on("load resize orientationchange", function() {
                setPaneDimensions();
                //updateOffset();
            })
        };


        /**
         * set the pane dimensions and scale the container
         */
        function setPaneDimensions() {
            pane_width = element.width();
            panes.each(function() {
                $(this).width(pane_width);
            });
            container.width(pane_width*pane_count);
        };


        /**
         * show pane by index
         * @param   {Number}    index
         */
        this.showPane = function( index ) {
            // between the bounds
            index = Math.max(0, Math.min(index, pane_count-1));
            current_pane = index;

            var offset = -((100/pane_count)*current_pane);
            setContainerOffset(offset, true);
        };


        function setContainerOffset(percent, animate) {
            container.removeClass("animate");

            if(animate) {
                container.addClass("animate");
            }

            if(Modernizr.csstransforms3d) {
                container.css("transform", "translate3d("+ percent +"%,0,0) scale3d(1,1,1)");
            }
            else if(Modernizr.csstransforms) {
                container.css("transform", "translate("+ percent +"%,0)");
            }
            else {
                var px = ((pane_width*pane_count) / 100) * percent;
                container.css("left", px+"px");
            }
        }

        this.next = function() { return this.showPane(current_pane+1, true); };
        this.prev = function() { return this.showPane(current_pane-1, true); };



        function handleHammer(ev) {
            console.log(ev);
            // disable browser scrolling
            ev.gesture.preventDefault();

            switch(ev.type) {
                case 'dragright':
                case 'dragleft':
                    // stick to the finger
                    var pane_offset = -(100/pane_count)*current_pane;
                    var drag_offset = ((100/pane_width)*ev.gesture.deltaX) / pane_count;

                    // slow down at the first and last pane
                    if((current_pane == 0 && ev.gesture.direction == Hammer.DIRECTION_RIGHT) ||
                        (current_pane == pane_count-1 && ev.gesture.direction == Hammer.DIRECTION_LEFT)) {
                        drag_offset *= .4;
                    }

                    setContainerOffset(drag_offset + pane_offset);
                    break;

                case 'swipeleft':
                    self.next();
                    ev.gesture.stopDetect();
                    break;

                case 'swiperight':
                    self.prev();
                    ev.gesture.stopDetect();
                    break;

                case 'release':
                    // more then 50% moved, navigate
                    if(Math.abs(ev.gesture.deltaX) > pane_width/2) {
                        if(ev.gesture.direction == 'right') {
                            self.prev();
                        } else {
                            self.next();
                        }
                    }
                    else {
                        self.showPane(current_pane, true);
                    }
                    break;
            }
        }

        element.hammer({ drag_lock_to_axis: true })
            .on("release dragleft dragright swipeleft swiperight", handleHammer);
    }


    var carousel = new Carousel("#carousel");
    carousel.init();


    </script>

    <script src="assets/js/ga.js"></script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Hammer.js</title>
	<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
	<style>

	html, body, #carousel, #carousel ul, #carousel li {
	min-height: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	position: relative;
	}

	#debug {
	position: fixed;
	background: #fff;
	padding: 5px;
	color: #000;
	top: 0;
	left: 0;
	z-index: 1337;
	}

	#carousel {
	background: silver;
	overflow: hidden;
	width:100%;
	-webkit-backface-visibility: hidden;
	-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
	-webkit-transform-style: preserve-3d;
	}

	#carousel ul.animate {
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	-o-transition: all .3s;
	transition: all .3s;
	}

	#carousel ul {
	transform: translate3d(0%,0,0) scale3d(1,1,1);
	-o-transform: translate3d(0%,0,0) scale3d(1,1,1);
	-ms-transform: translate3d(0%,0,0) scale3d(1,1,1);
	-moz-transform: translate3d(0%,0,0) scale3d(1,1,1);
	-webkit-transform: translate3d(0%,0,0) scale3d(1,1,1);
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	}

	#carousel ul {
	-webkit-box-shadow: 0 0 20px rgba(0,0,0,.2);
	box-shadow: 0 0 20px rgba(0,0,0,.2);
	position: relative;
	}

	#carousel li {
	float: left;
	overflow: hidden;
	-webkit-transform-style: preserve-3d;
	-webkit-transform: translate3d(0,0,0);
	}

	#carousel li h2 {
	color: #fff;
	font-size: 30px;
	text-align: center;
	position: absolute;
	top: 40%;
	left: 0;
	width: 100%;
	text-shadow: -1px -1px 0 rgba(0,0,0,.2);
	}

	#carousel li.pane1 { background: #42d692; }
	#carousel li.pane2 { background: #4986e7; }
	#carousel li.pane3 { background: #d06b64; }
	#carousel li.pane4 { background: #cd74e6; }
	#carousel li.pane5 { background: #9fe1e7; }

	</style>
	</head>

	<body>

	<!--<div id="debug">Log</div>-->

	<div id="carousel">
	<ul>
	<li class="pane1"><h2>Swipe...</h2></li>
	<li class="pane2"><h2>...or drag...</h2></li>
	<li class="pane3"><h2>...or swipe...</h2></li>
	<li class="pane4"><h2>..or drag...</h2></li>
	<li class="pane5"><h2>Dit is het einde!</h2></li>
	</ul>
	</div>


	<!-- jQuery is just for the demo! Hammer.js works without jQuery :-) -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
	<script src="assets/js/modernizr.js"></script>

	<script src="../dist/jquery.hammer.js"></script>

	<script>

	var debug_el = $("#debug");
	function debug(text) {
	debug_el.text(text);
	}


	/**
	* requestAnimationFrame and cancel polyfill
	*/
	(function() {
	var lastTime = 0;
	var vendors = ['ms', 'moz', 'webkit', 'o'];
	for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
	window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
	window.cancelAnimationFrame =
	window[vendors[x]+'CancelAnimationFrame'] \|\| window[vendors[x]+'CancelRequestAnimationFrame'];
	}

	if (!window.requestAnimationFrame)
	window.requestAnimationFrame = function(callback, element) {
	var currTime = new Date().getTime();
	var timeToCall = Math.max(0, 16 - (currTime - lastTime));
	var id = window.setTimeout(function() { callback(currTime + timeToCall); },
	timeToCall);
	lastTime = currTime + timeToCall;
	return id;
	};

	if (!window.cancelAnimationFrame)
	window.cancelAnimationFrame = function(id) {
	clearTimeout(id);
	};
	}());


	/**
	* super simple carousel
	* animation between panes happens with css transitions
	*/
	function Carousel(element)
	{
	var self = this;
	element = $(element);

	var container = $(">ul", element);
	var panes = $(">ul>li", element);

	var pane_width = 0;
	var pane_count = panes.length;

	var current_pane = 0;


	/**
	* initial
	*/
	this.init = function() {
	setPaneDimensions();

	$(window).on("load resize orientationchange", function() {
	setPaneDimensions();
	//updateOffset();
	})
	};


	/**
	* set the pane dimensions and scale the container
	*/
	function setPaneDimensions() {
	pane_width = element.width();
	panes.each(function() {
	$(this).width(pane_width);
	});
	container.width(pane_width*pane_count);
	};


	/**
	* show pane by index
	* @param {Number} index
	*/
	this.showPane = function( index ) {
	// between the bounds
	index = Math.max(0, Math.min(index, pane_count-1));
	current_pane = index;

	var offset = -((100/pane_count)*current_pane);
	setContainerOffset(offset, true);
	};


	function setContainerOffset(percent, animate) {
	container.removeClass("animate");

	if(animate) {
	container.addClass("animate");
	}

	if(Modernizr.csstransforms3d) {
	container.css("transform", "translate3d("+ percent +"%,0,0) scale3d(1,1,1)");
	}
	else if(Modernizr.csstransforms) {
	container.css("transform", "translate("+ percent +"%,0)");
	}
	else {
	var px = ((pane_widthpane_count) / 100) percent;
	container.css("left", px+"px");
	}
	}

	this.next = function() { return this.showPane(current_pane+1, true); };
	this.prev = function() { return this.showPane(current_pane-1, true); };



	function handleHammer(ev) {
	console.log(ev);
	// disable browser scrolling
	ev.gesture.preventDefault();

	switch(ev.type) {
	case 'dragright':
	case 'dragleft':
	// stick to the finger
	var pane_offset = -(100/pane_count)*current_pane;
	var drag_offset = ((100/pane_width)*ev.gesture.deltaX) / pane_count;

	// slow down at the first and last pane
	if((current_pane == 0 && ev.gesture.direction == Hammer.DIRECTION_RIGHT) \|\|
	(current_pane == pane_count-1 && ev.gesture.direction == Hammer.DIRECTION_LEFT)) {
	drag_offset *= .4;
	}

	setContainerOffset(drag_offset + pane_offset);
	break;

	case 'swipeleft':
	self.next();
	ev.gesture.stopDetect();
	break;

	case 'swiperight':
	self.prev();
	ev.gesture.stopDetect();
	break;

	case 'release':
	// more then 50% moved, navigate
	if(Math.abs(ev.gesture.deltaX) > pane_width/2) {
	if(ev.gesture.direction == 'right') {
	self.prev();
	} else {
	self.next();
	}
	}
	else {
	self.showPane(current_pane, true);
	}
	break;
	}
	}

	element.hammer({ drag_lock_to_axis: true })
	.on("release dragleft dragright swipeleft swiperight", handleHammer);
	}


	var carousel = new Carousel("#carousel");
	carousel.init();


	</script>

	<script src="assets/js/ga.js"></script>

	</body>
	</html>
No results found