JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content-slide">
  <div id="content-slide-container">
    <div class="content content-1">
      <h2>1</h2>
    </div>
    <div class="content content-2">
      <h2>2</h2>
    </div>
    <div class="content content-3">
      <h2>3</h2>
    </div>
    <div class="content content-4">
      <h2>4</h2>
    </div>
    <div class="content content-5">
      <h2>5</h2>
    </div>
    <div class="content content-6">
      <h2>6</h2>
    </div>
    <div class="content content-7">
      <h2>7</h2>
    </div>
    <div class="content content-8">
      <h2>8</h2>
    </div>
    <div class="content content-9">
      <h2>9</h2>
    </div>
    <div class="content content-10">
      <h2>10</h2>
    </div>
    <div class="content content-11">
      <h2>11</h2>
    </div>
    <div class="content content-12">
      <h2>12</h2>
    </div>
    <div class="content content-13">
      <h2>13</h2>
    </div>
    <div class="content content-14">
      <h2>14</h2>
    </div>
    <div class="content content-15">
      <h2>15</h2>
    </div>
    <div class="content content-16">
      <h2>16</h2>
    </div>
  </div>
</div>
<div id="navigation">
  <span id="prev-slide">Prev</span>
  <span id="next-slide">Next</span>
</div>

CSS

#content-slide {
  width: 200px;
  height: 100px;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

#content-slide-container {
  width: 3200px;
  height: 100px;
}

.content {
  width: 200px;
  height: 100px;
  background-color: #FF1493;
  float: left;
}

.content h2 {
  font-size: 25px;
  text-align: center;
}

#navigation {
  width: 400px;
  height: 20px;
  margin: 0 auto;
}

#prev-slide {
  width: 100px;
  height: 20px;
  float: left;
  background-color: #000000;
  text-align: center;
  color: #FFFFFF;
  cursor: pointer;
}

#next-slide {
  width: 100px;
  height: 20px;
  float: right;
  background-color: #000000;
  color: #FFFFFF;
  text-align: center;
  cursor: pointer;
}

JavaScript

$(document).ready(function() {
  var foo = {
    content_width: 200,
    box: $("#content-slide-container"),
    interval: 0,
    counter: 1,
    pause: 5000,
    bar: false
  };

  function startSlider() {
    foo.interval = setInterval(function() {
      // Next
      if (foo.bar) {
        slideLeft()
        // Prev
      } else {
        slideRight()
      }

    }, foo.pause);
  }

  function slideLeft() {
    foo.box.animate({
      'marginLeft': '+=' + (foo.content_width)
    });
    foo.counter--;
    if (foo.counter <= 1) {
      foo.bar = false;
    }
  }

  function slideRight() {
    foo.box.animate({
      'marginLeft': '-=' + (foo.content_width)
    });
    foo.counter++;
    if (foo.counter >= 16) {
      foo.bar = true;
    }
  }
  startSlider();

  function pauseSlider() {
    clearInterval(foo.interval);
  }
  foo.box.on('mouseenter', pauseSlider).on('mouseleave', startSlider);

  $('#prev-slide').click(function() {
    // alert(foo.counter);
    if (foo.counter > 1) {
      foo.bar = true;
      pauseSlider();
      slideLeft()
      startSlider()
    }
  });
  $('#next-slide').click(function() {
    //alert(foo.counter);
    if (foo.counter < 16) {
      foo.bar = false;
      pauseSlider()
      slideRight()
      startSlider()

    }
  });
});