tilomitra/yuiconf-2013-carousel.html

## yuiconf-2013-carousel.html
<!DOCTYPE html>
<html>
<head>
    <title>YUI Gestures</title>

    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/pure-min.css">
    <style>

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

        #carousel {
            max-height: 350px;
            background: #ccc;
            overflow: hidden;
            width:100%;
            -webkit-transform: translate3d(0,0,0);
        }

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

        #carousel ul {
            transform: translate3d(0%,0,0);
            -o-transform: translate3d(0%,0,0);
            -ms-transform: translate3d(0%,0,0);
            -moz-transform: translate3d(0%,0,0);
            -webkit-transform: translate3d(0%,0,0);
            overflow: hidden;
        }

        #carousel ul {
            box-shadow: 0 0 10px rgba(0,0,0,.3);
            position: relative;
        }

        #carousel li {
            float: left;
            overflow: hidden;
            -webkit-transform: translate3d(0,0,0);
            background: black;
        }

        #carousel li img {
            width: 100%;
            height: auto;
            overflow: hidden;
            margin-top: -100px;
        }

        .content {
            width: 60%;
            margin: 0 auto;
            line-height: 1.6em;
        }

        h2 {
            text-transform: uppercase;
            letter-spacing: 0.02em;
            font-size: 200%;
            line-height: 1.2em;
        }

        .carousel-controls {
            position: absolute;
            top: 50%;
            width: 100%;
            font-size: 200%;
        }

        .carousel-control {
            left: 0;
            position: absolute;
            top: 0;
            width: 7%;
            text-decoration: none;
            color: white;
            font-weight: 100;
        }
        .control-prev {
            text-align: right;
        }
        .control-next {
            right: 0;
            left: auto;
        }


        @media (max-width: 540px) {
            .content {
                width: 90%;
            }
            #carousel {
                max-height: 100%;
            }
            #carousel li img {
                width: auto;
                height: 100%;
                margin-top: -15px;
            }
        }

    </style>
</head>

<body>

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

    <div id="carousel">
        <ul>
            <li class="pane" id="pane1">
                <img src="http://farm3.staticflickr.com/2828/9063234351_09b28925c7_b.jpg">
            </li>
            <li class="pane" id="pane2">
                <img src="http://farm6.staticflickr.com/5350/9065526040_241de1c8f6_b.jpg">
            </li>
            <li class="pane" id="pane3">
                <img src="http://farm6.staticflickr.com/5325/9063205911_016fa66077_b.jpg">
            </li>
            <li class="pane" id="pane4">
                <img src="http://farm8.staticflickr.com/7309/9063037277_908d6850ae_b.jpg">
            </li>
            <li class="pane" id="pane5">
                <img src="http://farm8.staticflickr.com/7334/9063145941_05a3849823_b.jpg">
            </li>
        </ul>

        <div class="carousel-controls">
            <a class="carousel-control control-prev" href="#">&lt;</a>
            <a class="carousel-control control-next" href="#">&gt;</a>
        </div>
    </div>

    <div class="content">
        <h2>Tap, Drag, and Flick the Carousel</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <script src="http://yui.yahooapis.com/3.13.0/build/yui/yui-min.js"></script>
    <script>
        YUI({
            modules: {
                'event-drag': 'https://raw.github.com/tilomitra/yui3/gesture-integration/build/event-drag/event-drag.js',
                'event-move': 'https://raw.github.com/tilomitra/yui3/gesture-integration/build/event-move/event-move.js',
                'event-flick': 'https://raw.github.com/tilomitra/yui3/gesture-integration/build/event-flick/event-flick.js'
            }
        }).use('node', 'event-tap', 'event-move', 'event-drag', 'event-flick', function (Y) {
            var carousel = Y.one('#carousel'),
                container = carousel.one('ul'),
                panes = carousel.all('li'),
                currentPane = 0,
                paneWidth = 0;

            //just a hack to preventDefault on touchstart
            //TODO: remove this.

            carousel.on('move', function (e) {
                //get the total number of panes.
                var paneCount = panes.size();

                //100/paneCount is the % offset for each pane. That * currentPane tells you
                //what the offset is for the start of the current pane.
                var paneOffset = -(100/paneCount)*currentPane;

                //The dragOffset is the % of the next/prev pane that you want to show while dragging.
                var dragOffset = ((100/paneWidth)*e.gesture.deltaX) / paneCount;
                // slow down at the first and last pane
                if (e.gesture.direction === 'right' && currentPane === 0) {
                    dragOffset *= 0.5;
                }
                else if (e.gesture.direction === 'left' && currentPane === paneCount - 1) {
                    dragOffset *= 0.5;
                }
                changeOffset(dragOffset + paneOffset);
            }, { preventDefault: true });


            carousel.on('gesturemoveend', function (e) {

                //if the total delta between start and end is > paneWidth/2, move the pane left or right.
                if (Math.abs(e.gesture.deltaX) > paneWidth/2) {
                    if (e.gesture.dirX === 'left') {
                        showPane(currentPane + 1);
                    }
                    else {
                        showPane(currentPane - 1);
                    }
                }
                //if the total distance is <= paneWidth/2, just show the currentPane
                else {
                    showPane(currentPane);
                }
            });

            carousel.on('flickright', prevPane, { minVelocity: 0.75 });
            carousel.on('flickleft', nextPane, { minVelocity: 0.75 });

            Y.one('.control-prev').on('tap', function (e) {
                e.preventDefault();
                prevPane();
            });
            Y.one('.control-next').on('tap', function (e) {
                e.preventDefault();
                nextPane();
            });

            function changeOffset (percent, animate) {
                if (animate && !container.hasClass('animate')) {
                    container.addClass("animate");
                }
                else if (!animate) {
                    container.removeClass("animate");
                }

                container.setStyle("transform", "translate3d("+ percent +"%,0,0)");
            }

            function showPane ( index ) {
                var paneCount = panes.size();
                index = Math.max(0, Math.min(index, paneCount - 1));
                currentPane = index;

                var offset = -((100/paneCount)*currentPane);
                changeOffset(offset, true);
            };

            function nextPane() {
                showPane(currentPane+1, true);
            }

            function prevPane() {
                showPane(currentPane-1, true);
            }


            //This runs on page load to make sure the panes are 100% on every browser.
            function layoutPanes() {
                //set the width of the panes based on the width of the carousel parent
                paneWidth = parseInt(carousel.getStyle('width').replace('px', ''), 10);

                panes.each(function(item) {
                    item.setStyle('width', paneWidth + 'px');
                });

                //set the width of the <ul> as the sum of the width of all the panes.
                container.setStyle('width', paneWidth*panes.size() + 'px');
            };


            Y.one('window').on(['resize', 'orientationchange'], layoutPanes);
            layoutPanes();
        });
    </script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>YUI Gestures</title>

	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1">
	<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/pure-min.css">
	<style>

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

	#carousel {
	max-height: 350px;
	background: #ccc;
	overflow: hidden;
	width:100%;
	-webkit-transform: translate3d(0,0,0);
	}

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

	#carousel ul {
	transform: translate3d(0%,0,0);
	-o-transform: translate3d(0%,0,0);
	-ms-transform: translate3d(0%,0,0);
	-moz-transform: translate3d(0%,0,0);
	-webkit-transform: translate3d(0%,0,0);
	overflow: hidden;
	}

	#carousel ul {
	box-shadow: 0 0 10px rgba(0,0,0,.3);
	position: relative;
	}

	#carousel li {
	float: left;
	overflow: hidden;
	-webkit-transform: translate3d(0,0,0);
	background: black;
	}

	#carousel li img {
	width: 100%;
	height: auto;
	overflow: hidden;
	margin-top: -100px;
	}

	.content {
	width: 60%;
	margin: 0 auto;
	line-height: 1.6em;
	}

	h2 {
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 200%;
	line-height: 1.2em;
	}

	.carousel-controls {
	position: absolute;
	top: 50%;
	width: 100%;
	font-size: 200%;
	}

	.carousel-control {
	left: 0;
	position: absolute;
	top: 0;
	width: 7%;
	text-decoration: none;
	color: white;
	font-weight: 100;
	}
	.control-prev {
	text-align: right;
	}
	.control-next {
	right: 0;
	left: auto;
	}


	@media (max-width: 540px) {
	.content {
	width: 90%;
	}
	#carousel {
	max-height: 100%;
	}
	#carousel li img {
	width: auto;
	height: 100%;
	margin-top: -15px;
	}
	}

	</style>
	</head>

	<body>

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

	<div id="carousel">
	<ul>
	<li class="pane" id="pane1">
	<img src="http://farm3.staticflickr.com/2828/9063234351_09b28925c7_b.jpg">
	</li>
	<li class="pane" id="pane2">
	<img src="http://farm6.staticflickr.com/5350/9065526040_241de1c8f6_b.jpg">
	</li>
	<li class="pane" id="pane3">
	<img src="http://farm6.staticflickr.com/5325/9063205911_016fa66077_b.jpg">
	</li>
	<li class="pane" id="pane4">
	<img src="http://farm8.staticflickr.com/7309/9063037277_908d6850ae_b.jpg">
	</li>
	<li class="pane" id="pane5">
	<img src="http://farm8.staticflickr.com/7334/9063145941_05a3849823_b.jpg">
	</li>
	</ul>

	<div class="carousel-controls">
	<a class="carousel-control control-prev" href="#"><</a>
	<a class="carousel-control control-next" href="#">></a>
	</div>
	</div>

	<div class="content">
	<h2>Tap, Drag, and Flick the Carousel</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

	<script src="http://yui.yahooapis.com/3.13.0/build/yui/yui-min.js"></script>
	<script>
	YUI({
	modules: {
	'event-drag': 'https://raw.github.com/tilomitra/yui3/gesture-integration/build/event-drag/event-drag.js',
	'event-move': 'https://raw.github.com/tilomitra/yui3/gesture-integration/build/event-move/event-move.js',
	'event-flick': 'https://raw.github.com/tilomitra/yui3/gesture-integration/build/event-flick/event-flick.js'
	}
	}).use('node', 'event-tap', 'event-move', 'event-drag', 'event-flick', function (Y) {
	var carousel = Y.one('#carousel'),
	container = carousel.one('ul'),
	panes = carousel.all('li'),
	currentPane = 0,
	paneWidth = 0;

	//just a hack to preventDefault on touchstart
	//TODO: remove this.

	carousel.on('move', function (e) {
	//get the total number of panes.
	var paneCount = panes.size();

	//100/paneCount is the % offset for each pane. That * currentPane tells you
	//what the offset is for the start of the current pane.
	var paneOffset = -(100/paneCount)*currentPane;

	//The dragOffset is the % of the next/prev pane that you want to show while dragging.
	var dragOffset = ((100/paneWidth)*e.gesture.deltaX) / paneCount;
	// slow down at the first and last pane
	if (e.gesture.direction === 'right' && currentPane === 0) {
	dragOffset *= 0.5;
	}
	else if (e.gesture.direction === 'left' && currentPane === paneCount - 1) {
	dragOffset *= 0.5;
	}
	changeOffset(dragOffset + paneOffset);
	}, { preventDefault: true });


	carousel.on('gesturemoveend', function (e) {

	//if the total delta between start and end is > paneWidth/2, move the pane left or right.
	if (Math.abs(e.gesture.deltaX) > paneWidth/2) {
	if (e.gesture.dirX === 'left') {
	showPane(currentPane + 1);
	}
	else {
	showPane(currentPane - 1);
	}
	}
	//if the total distance is <= paneWidth/2, just show the currentPane
	else {
	showPane(currentPane);
	}
	});

	carousel.on('flickright', prevPane, { minVelocity: 0.75 });
	carousel.on('flickleft', nextPane, { minVelocity: 0.75 });

	Y.one('.control-prev').on('tap', function (e) {
	e.preventDefault();
	prevPane();
	});
	Y.one('.control-next').on('tap', function (e) {
	e.preventDefault();
	nextPane();
	});

	function changeOffset (percent, animate) {
	if (animate && !container.hasClass('animate')) {
	container.addClass("animate");
	}
	else if (!animate) {
	container.removeClass("animate");
	}

	container.setStyle("transform", "translate3d("+ percent +"%,0,0)");
	}

	function showPane ( index ) {
	var paneCount = panes.size();
	index = Math.max(0, Math.min(index, paneCount - 1));
	currentPane = index;

	var offset = -((100/paneCount)*currentPane);
	changeOffset(offset, true);
	};

	function nextPane() {
	showPane(currentPane+1, true);
	}

	function prevPane() {
	showPane(currentPane-1, true);
	}


	//This runs on page load to make sure the panes are 100% on every browser.
	function layoutPanes() {
	//set the width of the panes based on the width of the carousel parent
	paneWidth = parseInt(carousel.getStyle('width').replace('px', ''), 10);

	panes.each(function(item) {
	item.setStyle('width', paneWidth + 'px');
	});

	//set the width of the <ul> as the sum of the width of all the panes.
	container.setStyle('width', paneWidth*panes.size() + 'px');
	};


	Y.one('window').on(['resize', 'orientationchange'], layoutPanes);
	layoutPanes();
	});
	</script>

	</body>
	</html>