JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider">
  <button class="l">&lt;&lt;</button>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
  <button class="r">&gt;&gt;</button>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  border: 0;
}
.slider {
    height:180px;
    width: 180px;
    background: red;
    padding: 10px 0 0 10px;
    position: relative;
    overflow: hidden;    
}
.slider .slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}
.slider .slide > div {
    margin: 10px 0 0 10px;
    height: 80px;
    width: 80px;
    background: green;
    float: left;
}
.slider button {
    display: block;
    text-align: center;
    position: absolute;
    top:0;
    left:0;
    height: 190px;
    visibility: hidden;
    z-index: 2;
    background-color: rgba(255,255,255, 0.4);
    cursor: pointer;
}
.slider button.r {
  left: auto;
  right: 0;
}
.slider:hover button {
    visibility: visible;    
}

JavaScript

var sliderWidth = $('.slider').width();

// оборачиваем каждые 4 дива в <div class="slide">
var newSlide;
$('.slider > div').each(function(i, el) {
    if (i % 4 == 0) {
        newSlide = $('<div class="slide">');
        newSlide.css('left', sliderWidth * i/4 + 'px');
        $('.slider .r').before(newSlide);
    }
    newSlide.append(el);
});

$('.slider .r').click(function(){
    if ($('.slider .slide:animated').length > 0) return;
    if (parseInt($(this).siblings('.slide:last-of-type').css('left')) >= sliderWidth) {
        $('.slider .slide').animate({'left':'-='+sliderWidth}, 600);
    }
});
$('.slider .l').click(function(){
    if ($('.slider .slide:animated').length > 0) return;
    if (parseInt($(this).siblings('.slide:first-of-type').css('left')) < 0) {
        $('.slider .slide').animate({'left':'+='+sliderWidth}, 600);
    }
});