JSFiddle - React, Tailwind, and code Playground

by uiwwnw

HTML

<div class="cheese">
  <div class="cheeseBox">
    <div class="slideWrap">
      <div class="slideItem">
        안녕하시렵니까1
      </div>
      <div class="slideItem">
        안녕하시렵니까2
      </div>
      <div class="slideItem">
        안녕하시렵니까3
      </div>
      <div class="slideItem">
        안녕하시렵니까4
      </div>
      <div class="slideItem">
        안녕하시렵니까5
      </div>
    </div>
  </div>
</div>

CSS

.cheese {
  position: relative;
}

.cheeseBox {
  overflow: hidden;
}

.slideWrap {
  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;
}

.slideItem {
  display: inline-block;
  width: 100%;
}

.slideItem {
  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;
}