Last active
October 31, 2019 11:20
-
-
Save olton/bd5533873b3f9172599d4f0311662df0 to your computer and use it in GitHub Desktop.
How to create touchable carousel in Metro 4
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment