olton/Metro 4 touchable carousel.html

## Metro 4 touchable carousel.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">

    <title>Touchable carousel - Metro 4 :: Popular HTML, CSS and JS library</title>
    <style>
        .carousel {
            height: 100vh!important;
        }
        .slide {
            display: flex!important;
            justify-content: center;
            align-items: center;
            font-size: 64px;
        }
    </style>
</head>
<body class="m4-cloak">
    <div id="carousel"
         data-role="carousel, touch"
         data-effect="slide"
         data-period="3000"
         data-duration="500"
         data-on-swipe="swipe"
         data-fingers="1"
    >
        <div class="slide bg-green fg-white">1</div>
        <div class="slide bg-green fg-white">2</div>
        <div class="slide bg-green fg-white">3</div>
    </div>

    <script src="../metro/js/metro.js?ver=@@b-version"></script>
    <script>
        function swipe(event, direction, distance, duration, fingerCount, fingerData, currentDirection){
            var carousel = Metro.getPlugin("#carousel", "carousel");
            if (direction === "right") {
                carousel.prev();
            }
            if (direction === "left") {
                carousel.next();
            }
        }
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<link href="../metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">

	<title>Touchable carousel - Metro 4 :: Popular HTML, CSS and JS library</title>
	<style>
	.carousel {
	height: 100vh!important;
	}
	.slide {
	display: flex!important;
	justify-content: center;
	align-items: center;
	font-size: 64px;
	}
	</style>
	</head>
	<body class="m4-cloak">
	<div id="carousel"
	data-role="carousel, touch"
	data-effect="slide"
	data-period="3000"
	data-duration="500"
	data-on-swipe="swipe"
	data-fingers="1"
	>
	<div class="slide bg-green fg-white">1</div>
	<div class="slide bg-green fg-white">2</div>
	<div class="slide bg-green fg-white">3</div>
	</div>

	<script src="../metro/js/metro.js?ver=@@b-version"></script>
	<script>
	function swipe(event, direction, distance, duration, fingerCount, fingerData, currentDirection){
	var carousel = Metro.getPlugin("#carousel", "carousel");
	if (direction === "right") {
	carousel.prev();
	}
	if (direction === "left") {
	carousel.next();
	}
	}
	</script>
	</body>
	</html>