JSFiddle - React, Tailwind, and code Playground

by Michel Plungjan

HTML

<div class="container">
  <div class="inner-container">
    <div class="box">
      1
    </div>
    <div class="box">
      2
    </div>
    <div class="box">
      3
    </div>
    <div class="box">
      4
    </div>
    <div class="box">
      5
    </div>
  </div>
</div>



<button type="button" id="previous">Previous Slide</button>
<button type="button" id="next">Next Slide</button>

CSS

#test {
  width: 100px;
  min-height: 100px;
}

.container {
  width: 250px;
  height: 250px;
  border: 1px dotted red;
}

.inner-container {
  width: 1250px;
}

.inner-container:after {
  display: block;
  clear: both;
  content: "";
}

.box {
  float: left;
  background: green;
  width: 250px;
  height: 250px;
  opacity: 0.4;
  padding: 104px;
  font-size: 36px;
  box-sizing: border-box;
  color: #fff;
  text-align: center;
}

button {
  margin-top: 20px;
}

JavaScript

$("#next").click(function() {
  $(".box:visible").eq(0).hide('slide', {
    direction: 'left'
  }, 1000);
});

$("#previous").click(function() {
  $(".box").not(":visible").last().show('slide', {
    direction: 'left'
  }, 1000);
});