examples/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <title>react touch carousel</title>
    <meta name="viewport" content="width=device-width">
    <style>
      body {
        margin: 8px auto;
        width: 960px;
        max-width: calc(100vw - 20px);
        color: #333;
      }
      h1 {
        margin: .2em auto;
        font-size: 24px;
      }
      a {
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
      }
      .page-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
      }
      .entry-link {
        display: block;
        margin: .1em auto;
        padding: .8em;
        border-radius: 5px;
        text-indent: .5em;
        text-decoration: none;
        color: #38e;
        background-color: #f5f5f5;
        transition: all 0.2s;
      }
      .entry-link:active {
        background-color: #d8d8d8;
      }
    </style>
  </head>

  <body ontouchstart="">
    <main>
      <h1>react-touch-carousel</h1>
      <p>Micro carousel framework for React.JS</p>
      <p>See some demos below<span hidden data-mobile-tip> on a mobile device</span></p>
      <image hidden data-mobile-tip src="./docs-qrcode.png" alt="Scan qrcode to open this page on phones">
      <ul class="page-list">
        <li><a class="entry-link" href="./boring/index.html">boring</a></li>
        <li><a class="entry-link" href="./boring/index.html?loop&autoplay">loop & autoplay</a></li>
        <li><a class="entry-link" href="./vertical/index.html">vertical</a></li>
        <li><a class="entry-link" href="./cascade/index.html">cascade</a></li>
        <li><a class="entry-link" href="./rolling/index.html">rolling</a></li>
        <li><a class="entry-link" href="./fade/index.html">fade</a></li>
        <li><a class="entry-link" href="./reuse/index.html">card reuse</a></li>
        <li><a class="entry-link" href="./cd/index.html">playing cd</a></li>
      </ul>

      <p>
        <a href="https://github.com/xiaody/react-touch-carousel">
          Fork me at GitHub.
        </a>
      </p>
    </main>
    <script>
    if (!/mobile|android/i.test(navigator.userAgent)) {
      for (const elt of document.querySelectorAll('[data-mobile-tip]')) {
        elt.removeAttribute('hidden')
      }
    }
    </script>
  </body>
</html>