JSFiddle - React, Tailwind, and code Playground

by mamounothman

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<div id="stage">
  <div class="carousel">
    <div class="item invisible">
      <div style="background-image:url(https://picsum.photos/seed/kilo/1920/1080);"></div>
    </div>
    <div class="item d-none">
      <div style="background-image:url(https://picsum.photos/seed/alpha/1920/1080);"></div>
    </div>
    <div class="item d-none">
      <div style="background-image:url(https://picsum.photos/seed/golf/1920/1080);"></div>
    </div>
    <div class="item d-none">
      <div style="background-image:url(https://picsum.photos/seed/uniform/1920/1080);"></div>
    </div>
    <div class="item d-none">
      <div style="background-image:url(https://picsum.photos/seed/yankee/1920/1080);"></div>
    </div>
    <div class="item d-none">
      <div style="background-image:url(https://picsum.photos/seed/alfa/1920/1080);"></div>
    </div>
  </div>
  
  <div class="controls">
		<div class="ctrl-btn ctrl-prev invisible nus"></div>
		<div class="ctrl-btn ctrl-next invisible nus"></div>
  </div>
</div>

SCSS

#stage {
  max-width: 100vw;
  overflow: hidden;

  .carousel {
    display: flex;
    position: relative;
    top: auto;
    left: auto;

    &.sliding {
      transition: left 3000ms ease;
    }

    .item {
      width: 33.3333%;
      flex: 0 0 33.3333%;

      >div {
        background: {
          position: center;
          repeat: no-repeat;
          size: cover;
        }

        &:before {
          content: "";
          display: block;
          padding-bottom: percentage(9/16);
        }
      }
    }
  }

  .controls {
    display: flex;
    justify-content: center;

    .ctrl-btn {
      width: 50px;
      height: 50px;
      background-color: #212121;
      border: 1px solid #000;
      margin: 5px 10px;
    }
  }
}

JavaScript

/* Simple JavaScript Inheritance
 * By John Resig https://johnresig.com/
 * MIT Licensed.
 */
!(function () {
  var e = !1,
    o = /xyz/.test(function () {
      xyz;
    })
      ? /\b_super\b/
      : /.*/;
  (this.Class = function () {}),
    (Class.extend = function (t) {
      var s = this.prototype;
      e = !0;
      var n = new this();
      for (var i in ((e = !1), t))
        n[i] =
          "function" == typeof t[i] && "function" == typeof s[i] && o.test(t[i])
            ? (function (i, r) {
                return function () {
                  var t = this._super;
                  this._super = s[i];
                  var n = r.apply(this, arguments);
                  return (this._super = t), n;
                };
              })(i, t[i])
            : t[i];
      function r() {
        !e && this.init && this.init.apply(this, arguments);
      }
      return (((r.prototype = n).constructor = r).extend = arguments.callee), r;
    });
})();

$(window).on("load", function () {
  new carousel($("#stage")[0], [{ size: 320, value: 3 }]);
});

var carousel = Class.extend({
  init: function (stage, sizes, axis) {
    var self = this;
    self.stage = $(stage);
    self.carousel = self.stage.find(".carousel");
    self.list = self.stage.find(".item");
    self.selections =
      self.stage.find(".selection").length > 0
        ? self.stage.find(".selection")
        : null;

    self.params = {
      direction: null,
      paginate: null,
      delay: self.stage.data("delay") != null ? +self.stage.data("delay") : 3000,
      pause: false,
      stockpile: 0,
      sizes: sizes.sort(function (a, b) {
        return a.size - b.size;
      }),
      axis: typeof axis == "undefined" || axis === "" ? "left" : axis,
    };

    self.baseSetup();
    self.params.firstRun = false;
    $(window).on("resize", function () {
      self.baseSetup();
    });

    self.stage.find(".ctrl-prev").click(function () {
      self.slide(!1, !0);
    });
   ...