JSFiddle - React, Tailwind, and code Playground

by olex

HTML

<div class="slide one">
  <h2>Content here</h2>
</div>
<div class="slide two">
  <h2>Content here</h2>
</div>
<div class="slide three">
  <h2>Content here</h2>
</div>
<div class="slide four">
  <h2>Content here</h2>
</div>
<div class="slide five">
  <h2>Content here</h2>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 32 32" id="previous" version="1.1" viewBox="0 0 32 32" xml:space="preserve">
  <path d="M7.701,14.276l9.586-9.585c0.879-0.878,2.317-0.878,3.195,0l0.801,0.8c0.878,0.877,0.878,2.316,0,3.194  L13.968,16l7.315,7.315c0.878,0.878,0.878,2.317,0,3.194l-0.801,0.8c-0.878,0.879-2.316,0.879-3.195,0l-9.586-9.587  C7.229,17.252,7.02,16.62,7.054,16C7.02,15.38,7.229,14.748,7.701,14.276z" fill="#FFFFFF"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 32 32" id="next" version="1.1" viewBox="0 0 32 32" xml:space="preserve">
  <path d="M24.291,14.276L14.705,4.69c-0.878-0.878-2.317-0.878-3.195,0l-0.8,0.8c-0.878,0.877-0.878,2.316,0,3.194  L18.024,16l-7.315,7.315c-0.878,0.878-0.878,2.317,0,3.194l0.8,0.8c0.878,0.879,2.317,0.879,3.195,0l9.586-9.587  c0.472-0.471,0.682-1.103,0.647-1.723C24.973,15.38,24.763,14.748,24.291,14.276z" fill="#FFFFFF"/>
</svg>

CSS

svg {
  position: absolute;
  top: 50%;
  height: 5em;
  width: 5em;
  margin-top: -2.5em;
  cursor: pointer;
}

svg#next {
  right: 1em;
}

svg#previous {
  display: none;
  left: 1em;
}

.slide {
  display: flex;
  -webkit-display: flex;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  transition: all .5s ease;
  -moz-transition: all .5s ease;
  -ms-transition: all .5s ease;
  -webkit-transition: all .5s ease;
  -o-transition: all .5s ease;
}

div h2, div h1 {
  font-size: 2em;
  width: 100%;
  text-align: center;
  margin: 3em;
}

.zoomout {
  transform: scale(0.8);
  -moz-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -o-transform: scale(0.8);
  -ms-transform: scale(0.8);
}

.one {
  background-color: #8BC34A;
}

.two {
  background-color: #009688;
}

.three {
  background-color: #F44336;
}

.four {
  background-color: #673AB7;
}

JavaScript

var timer = 0;
var elementCount = 0;
var firstPos = 0;
var lastPos = 0;

$(function() {
  initialiseSlider();
  $("#next").click(function() {
    slideRight();
  });

  $("#previous").click(function() {
    slideLeft();
  });
});

function initialiseSlider() {
  $("div").each(function(value) {
    elementCount += 1;
    var position = -100 * value;
    $(this).css("left", position + "%");
  });

  if (elementCount === 1)
    $("#next").hide();
}

function slideRight() {
  $("div").each(function(value) {
    $(this).addClass("zoomout");
    var position = parseInt($(this)[0].style.left) + 100;

    if (value === 0)
      firstPos = position;

    $(this).css("left", position + "%");
    timer = setTimeout(removeZoom, 200);
  });

  console.log(firstPos);

  if (firstPos !== ((elementCount - 1) * 100)) {
    $("#next").show();
    $("#previous").show();
  } else
    $("#next").hide();
}

function slideLeft() {
  $("div").each(function(value) {
    $(this).addClass("zoomout");
    var position = parseInt($(this)[0].style.left) - 100;

    if (value === (elementCount - 1))
      lastPos = position;

    $(this).css("left", position + "%");
    timer = setTimeout(removeZoom, 200);
  });

  console.log(lastPos);

  if (lastPos !== ((elementCount - 1) * -100)) {
    $("#previous").show();
    $("#next").show();
  } else
    $("#previous").hide();
}

function removeZoom() {
  $("div").each(function() {
    $(this).removeClass("zoomout");
  });
}