JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slide" data-index="0">
  <div class="slide-wrap">
    <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </div>
  <div class="btn-wrap">
    <button type="button" class="btn-prev" data-type="prev">이전</button>
    <button type="button" class="btn-next" data-type="next">다음</button>
  </div>
</div>

CSS

*{margin:0;padding:0;list-style:none}

#slide{position:relative;width:400px;height:300px;margin:0 auto;border:1px solid #000}
#slide .slide-wrap{overflow:hidden;position:relative;width:100%;height:100%}
#slide .slide-wrap ul{position:relative;left:0;top:0}
#slide .slide-wrap li{position:absolute;top:0;width:400px;height:300px;}
#slide .slide-wrap li a{display:block;width:100%;height:100%}
#slide .slide-wrap li:nth-of-type(1){left:0;background:red}
#slide .slide-wrap li:nth-of-type(2){left:400px;background:green}
#slide .slide-wrap li:nth-of-type(3){left:800px;background:blue}
#slide .slide-wrap li:nth-of-type(4){ledt:1200px;background:gray}

#slide .btn-wrap{}
#slide .btn-wrap button{position:absolute;top:50%;width:30px;height:20px;border:1px solid red}
#slide .btn-wrap button.btn-prev{left:-50px}
#slide .btn-wrap button.btn-next{right:-50px}

JavaScript

function slide() {
  // 공용 변수
  var $wrapEle = $('#slide');
  var $moveEle = $wrapEle.find('ul');
  var $btnEles = $wrapEle.find('.btn-wrap button');
  var listWidth = $wrapEle.width();
  var listHeight = $wrapEle.height();  
  
  
  // 중첩함수(내부함수)
  function _move(type) {
    var currentIdx = $wrapEle.attr('data-index');
    var sumIdx = (type === 'next') ? currentIdx++ : currentIdx--;
    
    $moveEle.animate({
      'left': -(currentIdx * listWidth)
    }, 500, function(){
      $wrapEle.attr('data-index', currentIdx);
    });
  }
  
  // constructor
  (function(){
    $btnEles.on('click', function(){
      var btnType = $(this).attr('data-type');
      _move(btnType);
    });
  })();
}

slide();