JSFiddle - React, Tailwind, and code Playground

by uiwwnw

HTML

<div class="test1">
  <img src="http://www.playwares.com/xe/files/attach/images/423601/391/557/013/7b752ebe4992ce4763ecd35d2856939c.jpg" alt="">
  <img src="https://t1.daumcdn.net/cfile/tistory/167725234B58702520" alt="">
  <img src="http://extmovie.maxmovie.com/xe/files/attach/images/174/649/826/006/0680cbab6c51875ce7e6670e7db90edf.jpg" alt="">
  <img src="https://s-i.huffpost.com/gen/3574584/thumbs/o-GALAXY-900.jpg" alt="">
  <img src="https://www.popco.net/zboard/revol_getimg.php?id=dica_forum_fujifilm&no=19462&num=0&fc=00950928655bc838e1a163101737441a" alt="">
</div>

SCSS

.ux-carousel {
  position: relative;
  overflow: hidden;

  &--wrap {
        height: 100%;
    font-size: 0;

    white-space: nowrap;
    will-change: transform;

    > * {
      display: inline-block;
      vertical-align: top;
      font-size: 12px;
    }
  }

  &--button {
    button {
      outline: none;
      text-indent: -9999px;
      &[data-index="0"] {
        z-index: 2;
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        border: 0;
        background: 0;

        &:before {
          display: block;
          width: 30px;
          height: 30px;
          transform: rotate(45deg);
          border: 3px solid #fff;
          border-top: 0;
          border-right: 0;
          box-shadow: -1px 1px 1px rgba(0, 0, 0, .5);
          content: '';
        }
      }

      &[data-index="1"] {
        z-index: 2;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        border: 0;
        background: 0;

        &:before {
          display: block;
          width: 30px;
          height: 30px;
          transform: rotate(-45deg);
          border: 3px solid #fff;
          border-top: 0;
          border-left: 0;
          box-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
          content: '';
        }
      }
    }
  }

  &--page {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    text-align: center;
    list-style: none;
    font-size: 0;
    counter-reset: page;

    button {
      display: inline-block;
      width: 7px;
      height: 7px;
      margin: 6px 2px;
      padding: 0;
      outline: none;
      box-sizing: content-box;
      border: 0;
      border-radius: 7px;
      opacity: .5;
      transition: opacity .3s, width 1s;
      box-shadow: 1px 1px 1px rgba(0, 0, 0, .5);
      cursor: pointer;
      text-indent: -9999px;
      background:...

JavaScript

/*
 MIT License. 
 ux-carousel v0.1.3
 author: uiwwsw
 homepage:https://github.com/uiwwsw/ux-carousel#readme
 */ "use strict";

function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

var dir;

(function (dir) {
  dir[dir["start"] = 0] = "start";
  dir[dir["end"] = 1] = "end";
})(dir || (dir = {}));

var MSG = {
  'NOT_FOUND_OPTION_NAME': function NOT_FOUND_OPTION_NAME(key) {
    return "\uC791\uC131\uD558\uC2E0 ".concat(key, " \uC635\uC158\uC774\uB984\uC744 \uB2E4\uC2DC \uD655\uC778\uD574\uC8FC\uC138\uC694.");
  },
  'OPTION_TYPE': function OPTION_TYPE(key, value) {
    return "\uC635\uC158 \uD0C0\uC785\uC774 \uB2E4\uB985\uB2C8\uB2E4. ".concat(key, "\uC740 ").concat(value, " \uD0C0\uC785\uC785\uB2C8\uB2E4.");
  },
  'EMPTY': function EMPTY() {
    return '슬라이드할게 없어요';
  }
};
var fakeNext = Symbol["for"]('fakeNext');
var noFake = Symbol["for"]('noFake');
var fakePrev = Symbol["for"]('fakePrev');
var on = Symbol["for"]('on');
var off = Symbol["for"]('off');
var ing = Symbol["for"]('ing');
var...