JSFiddle - React, Tailwind, and code Playground

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 450ms 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') : 475),
			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)});
		self.stage.find('.ctrl-next').click(function(){self.slide(!0,!0)});
		
		if (typeof Hammer !== 'undefined') {
			var hammer = new Hammer(self.carousel[0]);
			'top'!=self.params.axis&&'bottom'!=self.params.axis||hammer.get('swipe').set({direction:Hammer.DIRECTION_VERTICAL});
			hammer.on('left'==self.params.axis||'right'==self.params.axis?'swipeleft swiperight':'swipeup swipedown',function(ev){
				switch(ev.type){
					case 'swipeleft':
					case...