JSFiddle - React, Tailwind, and code Playground

by joerhoney

HTML

<div id="smile-gallery" class="aFS56c641d29d032 ">
  <div class="slides">
    <figure class="slide" id="bna-1">
      <div class="slide-content">
        <pre>
 ________________________
|1                       |
|                        |
|         0    0         |
|                        |
|       \________/       |
|                        |
|________________________|
</pre>
      </div>
    </figure>
    <figure class="slide" id="bna-2">
      <div class="slide-content">
        <pre>
 ________________________
|2                       |
|                        |
|       o        O       |
|                        |
|                        |
|         ______/        |
|________________________|
</pre>
      </div>
    </figure>
    <figure class="slide" id="bna-3">
      <div class="slide-content">
        <pre>
 ________________________
|3                       |
|                        |
|       ^       ^        |
|                        |
|                        |
|        (EEEEE)         |
|________________________|
</pre>
      </div>
    </figure>
    <figure class="slide" id="bna-4">
      <div class="slide-content">
        <pre>
 ________________________
|4                       |
|                        |
|       |       |        |
|     ____________       |
|     \          /       |
|      \________/        |
|________________________|
</pre>
      </div>
    </figure>
  </div>
  <!-- /.slides  -->
</div>
<!-- /#smile-gallery -->
<p>
  Taken from <a href="https://github.com/leemark/better-simple-slideshow" target="_blank">A Better Simple Slideshow</a>.
</p>
<script>
var aFS56c641d29d032 = {
  auto: true,
  speed: 1000,
  pause: true,
};
aFSlides('.aFS56c641d29d032', aFS56c641d29d032);
</script>

CSS

body {
  font: 400 10px/1.3 Menlo, Courier, sans-serif;
}
figure {
  display: none;
}
figure.current {
  display: block;
}
figure pre {
  font: 700 24px/1.3 Menlo, Courier, sans-serif;
  white-space: pre;
}
span {
  background: #f66;
  color: #fff;
  font: 700 16px/1.3 Menlo, Courier, sans-serif;
  padding: 10px 20px;
  display: inline-block;
}

JavaScript

/*
    AddFunc Slides Javascript
*/
var aFSlides = function (el, options) {
  var $slideshows = document.querySelectorAll(el), // a collection of all of the slideshows
    $slideshow = {},
    Slideshow = {
      init: function (el, options) {
        this.counter = 0; // to keep track of current slide
        this.interval = 0; // to control autoCycle
        this.paused = 0; // to keep track of whether paused or not
        this.hovered = 0; // to keep track of whether hovered over or not
        this.cycling = 0; // to keep track of whether cycling or not
        this.el = el; // current slideshow container
        this.$items = el.querySelectorAll('figure'); // a collection of all of the slides, caching for performance
        this.numItems = this.$items.length; // total number of slides
        options = options || {}; // if options object not passed in, then set to empty object 
        // options.auto = options.auto || false; // if options.auto object is not passed in, then set to false
        this.opts = {
          auto: (typeof options.auto === "undefined") ? false : options.auto,
          speed: (typeof options.speed === "undefined") ? 6000 : options.speed,
          prevNext: (typeof options.prevNext === "undefined") ? true : options.prevNext,
          pause: (typeof options.pause === "undefined") ? false : options.pause,
          pauseOnHover: (typeof options.pauseOnHover === "undefined") ? true : options.pauseOnHover,
          //                    keyboard: (typeof options.keyboard === "undefined") ? true : options.keyboard, // (not working yet)
          fullScreen: (typeof options.fullScreen === "undefined") ? false : options.fullScreen,
          swipe: (typeof options.swipe === "undefined") ? false : options.swipe
        };
        this.$items[0].classList.add('current'); // add show class to first figure
//        if (this.opts.auto) {
//          this.autoCycle(this.el, this.opts.speed, this.opts.pauseOnHover);
//        }
        if...