JSFiddle - React, Tailwind, and code Playground

HTML

<div class="banner-continer">
    <p class="banner-next">＜</p>
    <div class="banner_wrapper">   
         <ul class="bannerSet"> 
            <li class="slide01 banner">slide1</li>
            <li class="slide02 banner">slide2</li>
            <li class="slide03 banner">slide3</li>
            <li class="slide04 banner">slide4</li>
            <li class="slide05 banner">slide5</li>
            <li class="slide06 banner">slide6</li>
            <li class="slide07 banner">slide7</li>
            <li class="slide08 banner">slide8</li>
            <li class="slide09 banner">slide9</li>        
        </ul>
    </div>  
    <p class="banner-prev">＞</p>
</div>

CSS

.banner-continer {
    width: 580px;
    position: relative;
}

.banner_wrapper {
    width: 540px;
    height: 70px;
    overflow: hidden;
    margin: 0;
    position: relative;
    float: left;
}

.bannerSet {
    position: relative;
    float: left;
    list-style: none;
    left: 0px;
}

.banner {
    float: left;
    width: 120px;
    height: 60px;
    margin: 5px;
}

.slide01 {
background: royalblue;
}
.slide02 {
background: grey;
}
.slide03 {
background: blue;
}
.slide04 {
background: aqua;
}
.slide05 {
background: yellow;
}

.slide06 {
background: orange;
}

.slide07 {
background: pink;
}

.slide08 {
background: greenyellow;
}

.slide09 {
background: purple;
}

.banner-next {
    position: absolute; 
    top: 0px; 
    left:0px;
    width: 30px;
    line-height: 70px;
    text-align: center;
    background-color: darkgrey;
    color:white;
    z-index: 1;
}

.banner-prev {
    position: absolute; 
    top: 0px; 
    right:0px;
    width: 30px;
    line-height: 70px;
    text-align: center;
    background-color: darkgrey;
    color:white;
    z-index: 1;
}

JavaScript

var slideWidth = $('.banner').width();	// .slideの幅を取得して代入
    var slideNum = $('.banner').length;	// .slideの数を取得して代入
    var slideSetWidth = (slideWidth + 10) * slideNum;	// .slideの幅×数で求めた値を代入
    $('.bannerSet').css('width', slideSetWidth);	// .slideSetのスタイルシートにwidth: slideSetWidthを指定
    var slideCurrent = 0;	// 現在地を示す変数

    // アニメーションを実行する独自関数
    //setInterval(autoSliding, 5000);



    // 前へボタンが押されたとき
    $('.banner-prev').click(function(){
        sliding(-1);
    });
    // 次へボタンが押されたとき
    $('.banner-next').click(function(){
        sliding(1);
    });

    function autoSliding() {
      sliding(1);
    }

    function sliding(next){

       if(next > 0) {
          $('ul.bannerSet').animate({marginLeft: '-=135px'},2000,slideLeft());
					
        } else {
          $('ul.bannerSet').animate({marginRight: '-=135px'},2000);
        	$('ul.bannerSet li:last').prependTo('ul.bannerSet')
        }
    }
    
    function slideLeft() {
    	$('ul.bannerSet li:first').appendTo('ul.bannerSet')
    }