JSFiddle - React, Tailwind, and code Playground

by uiwwnw

HTML

<div class="cheese">
  <div class="cheeseBox">
    <div class="cheeseInnerWrap">
      <div class="cheeseItem">안녕안녕1</div>
      <div class="cheeseItem">안녕안녕2</div>
      <div class="cheeseItem">안녕안녕3</div>
      <div class="cheeseItem">안녕안녕4</div>
      <div class="cheeseItem">안녕안녕5</div>
      <div class="cheeseItem">안녕안녕6</div>
      <div class="cheeseItem">안녕안녕7</div>
      <div class="cheeseItem">안녕안녕8</div>
      <div class="cheeseItem">안녕안녕9</div>
    </div>
  </div>
</div>
<button id="ddd">dsadsds</button>

CSS

.cheese {
      position: relative;
    }
    .cheeseBox {
      overflow: hidden;
    }

    .cheeseInnerWrap {
      width: 100%;
      font-size: 0;
      white-space: nowrap;
    }


    .cheeseLeftBtn,
    .cheeseRightBtn {
      z-index: 2;
      position: absolute;
      top: 50%;
      width: 30px;
      height: 30px;
      margin-top: -15px;
      border: 1px solid;
      font: inherit;
      background: #fff;
    }

    .cheeseLeftBtn {
      left: 0;

    }

    .cheeseLeftBtn:before {
      content: "<";
    }

    .cheeseRightBtn {
      right: 0;

    }

    .cheeseRightBtn:before {
      content: ">";
    }

    .cheesePaging {
      position: absolute;
    }

    .cheesePaging button:before {
      content: attr(data-slide);
    }
    
    .cheesePaging button.current {
      background: #000;
      color: #fff;
    }



    .cheeseItem {
      display: inline-block;
    } 
    .cheeseItem {
      width: calc(100% / 3);
      height: 50px;
      line-height: 50px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      border: 1px solid #000;
      text-align: center;
      font-size: 20px;
      color: #fff;
      background: red;
    }

    #ddd {
      margin-top: 30px;
    }

JavaScript

function cheeseSlider(opt) {
  var _this = this;
  this.opt = {};
  this.set = function() {
    return this.opt;
  }
  this.check = function(opt) {
    var _opt = (opt === undefined) ? {
      pause: false,
      idx: undefined,
      transition: true
    } : opt;
    this.chk.loop = false;
    this.chk.transition = _opt.transition;
    this.chk.cal = (this.opt.dir === 1) ? -1 : +1;
    this.chk.pause = (_opt.pause === true || this.opt.dir === false) ? true : false;

    (this.chk.pause === true) && (this.chk.cal = 0);
    this.chk.idx = (_opt.idx === undefined) ? Number(this.opt.innerWrap.getAttribute('data-index')) : _opt.idx;
    //if (_opt.idx !== undefined && this.opt.loop === true) {
      //(_opt.idx === this.opt.length - 1 && Number(this.opt.innerWrap.getAttribute('data-index')) < this.opt.length / 2) && (this.chk.loop = 'last');
      //(_opt.idx === 0 && Number(this.opt.innerWrap.getAttribute('data-index')) >= this.opt.length / 2) && (this.chk.loop = 'first');
      //console.log(this.chk.loop);
      //console.log(Number(this.opt.innerWrap.getAttribute('data-index')) < Number(this.opt.innerWrap.getAttribute('data-index')) / 2)
    //}
    this.chk.idx += this.chk.cal;
    if (this.chk.idx < 0) {
      this.chk.idx = this.opt.length - 1;
      (this.opt.loop) && (this.chk.loop = 'last');
    } else if (this.chk.idx >= this.opt.length) {
      this.chk.idx = 0;
      (this.opt.loop) && (this.chk.loop = 'first');
    }
    return this.chk;
  }
  this.size = function() {
    this.opt.dir = false;
    this.opt.itemWidth = [];
    this.opt.totalWidth = 0;
    this.opt.pos = [];
    this.opt.pos[0] = 0;
    for (var i = 0; i < this.opt.length; i++) {
      var _width = this.opt.item[i].offsetWidth;
      this.opt.itemWidth.push(_width);
      this.opt.totalWidth += _width;
      this.opt.pos[i + 1] = this.opt.totalWidth;
    }
    //console.log(this.opt.pos);
    this.opt.loopStyle;
    this.opt.loopStyleMl = 0;

    if (this.opt.loop) {
      this.opt.loopEa...