JSFiddle - React, Tailwind, and code Playground

by hellosze

HTML

<script src="https://raw.github.com/bradbirdsall/Swipe/master/swipe.js"></script>
<div class="c">
<div id='slider'>
  <ul>
    <li style='display:block'>1</li>
    <li style='display:none'>2</li>
    <li style='display:none'>3</li>
  </ul>
    </div>
    <nav>
    <a href='#' id='prev' onclick='slider.prev();return false;'><em>prev</em></a>
    <span id='position'><em class='on'>&bull;</em><em>&bull;</em><em>&bull;</em></span>
    <a href='#' id='next' onclick='slider.next();return false;'><em>next</em></a>
  </nav>
</div>

CSS

#slider { width: 300px; height: 300px; }
#slider li { font-size: 18px; }
.c { margin: 0 auto; width: 320px; }

JavaScript

window.mySwipe = new Swipe(
  document.getElementById('slider')
);