JSFiddle - React, Tailwind, and code Playground

HTML

<div class="glider-contain">
        <div class="glider">
            <div><img alt="Test" src="http://placehold.it/300x300?text=1"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=2"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=3"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=4"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=5"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=6"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=7"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=8"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=9"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=10"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=11"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=12"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=13"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=14"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=15"></div>
            <div><img alt="Test" src="http://placehold.it/300x300?text=16"></div>
        </div>
        <button class="glider-prev">&laquo;</button>
        <button class="glider-next">&raquo;</button>
        <div id="dots"></div>
    </div>

CSS

.glider-contain {
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.glider {
  margin: 0 auto;
  position: relative;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  transform: translateZ(0);
}
.glider-track {
  transform: translateZ(0);
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  z-index: 1;
}
.glider.draggable {
  user-select: none;
  cursor: -webkit-grab;
  cursor: grab;
}
.glider.draggable .glider-slide img {
  user-select: none;
  pointer-events: none;
}
.glider.drag {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.glider-slide {
  user-select: none;
  justify-content: center;
  align-content: center;
  background:#f5f5f5;
  width: 100%;
}
.glider-slide img {
  max-width: 100%;
}
.glider::-webkit-scrollbar {
  opacity: 0;
  height: 0;
}
.glider-prev,.glider-next {
  user-select: none;
  position: absolute;
  outline: none;
  background: none;
  padding: 0;
  z-index: 2;
  font-size: 40px;
  text-decoration: none;
  left: -23px;
  border: 0;
  top: 30%;
  cursor: pointer;
  color: #666;
  opacity: 1;
  line-height: 1;
  transition: opacity .5s cubic-bezier(.17,.67,.83,.67),
              color .5s cubic-bezier(.17,.67,.83,.67);
}
.glider-prev:hover,
.glider-next:hover,
.glider-prev:focus,
.glider-next:focus {
  color: #a89cc8;
}
.glider-next {
  right: -23px;
  left: auto;
}
.glider-next.disabled,
.glider-prev.disabled {
  opacity: .25;
  color: #666;
  cursor: default;
}
.glider-slide {
  min-width: 150px;
}
.glider-hide {
  opacity: 0;
}
.glider-dots {
  user-select: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
}
.glider-dot {
  background: none;
  border: 0;
  padding: 0;
  user-select: none;
  outline: none;
  display: block;
  cursor: pointer;
  color: #ccc;
  border-radius: 999px;
  background: #ccc;
  width: 12px;
  height: 12px;
  margin: 7px;
}
.glider-dot:hover,
.glider-dot:focus,
.glider-dot.active {
  background:...

JavaScript

/*
    _____ __ _     __                _
   / ___// /(_)___/ /___  ____      (_)___
  / (_ // // // _  // -_)/ __/_    / /(_-<
  \___//_//_/ \_,_/ \__//_/  (_)__/ //___/
                              |___/
  Version: 1.6.0
  Author: Nick Piscitelli (pickykneee)
  Website: https://nickpiscitelli.com
  Documentation: http://nickpiscitelli.github.io/Glider.js
  License: MIT License
  Release Date: October 25th, 2018
*/
;(function (factory) {
  typeof define === 'function' && define.amd ? define(factory) :
  typeof exports === 'object' ? module.exports = factory() :
  factory();
}(function() {
  'use strict';

  var Glider = window.Glider = function (element, settings) {

      var _ = this;

      if (element._glider)  return element._glider;

      _.ele = element
      _.ele.classList.add('glider');

      // expose glider object to its DOM element
      _.ele._glider = _

      // merge user setting with defaults
      _.opt = Object.assign({}, {
        slidesToScroll: 1,
        slidesToShow: 1,
        resizeLock: true,
        duration: .5,
        // easeInQuad
        easing: function (x, t, b, c, d) {
          return c*(t/=d)*t + b;
        }
      }, settings);

      // set defaults
      _.animate_id = _.page = _.slide = 0;
      _.arrows = {};

      // preserve original options to
      // extend breakpoint settings
      _._opt =  _.opt;

      // create track and wrap slides
      _.track = document.createElement('div');
      _.track.className = 'glider-track';
      _.ele.appendChild(_.track)
      while (_.ele.children.length !== 1){
        _.track.appendChild(_.ele.children[0])
      }

      // start glider
      _.init();

      // set events
      _.resize = _.init.bind(_, true);
      _.event(_.ele, 'add', {
        scroll: _.updateControls.bind(_)
      });
      _.event(window, 'add', {
        resize: _.resize
      })
    };

  var gliderPrototype = Glider.prototype;
  gliderPrototype.init = function(refresh, paging) {

    var _ =...