JSFiddle - React, Tailwind, and code Playground

by Bhumika107

HTML

<div class="frame">
  <div class="images">
    <img class="active" src="http://www.cutestpaw.com/wp-content/uploads/2016/02/In-the-spotlight.jpg">
    <img src="http://www.cutestpaw.com/wp-content/uploads/2016/02/Bath-time-with-ducky.jpg">
    <img src="http://www.cutestpaw.com/wp-content/uploads/2016/03/FB_IMG_1452981788903.jpg">
  </div>
</div>


<div class="previous">
  previous
</div>

<div class="next">
  next
</div>

CSS

.frame {
  width: 50%;
  overflow: hidden;
}

img {
  width: 25%;
  height: 100%;
  display: inline-block;
  float: left;
}

img.active {
  display: block;
}

.previous,
.next {
  font-size: 14px;
  border: 1px solid;
  padding: 3px;
  display: inline-block;
  margin-top: 8px;
  cursor: pointer;
}

.images {
  height: 100%;
  animation-name: slideAnim;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  padding: 0px !important;
  margin: 0px !Important;
  width: 400%;
  height: 100%;
}

@keyframes slideAnim {
  0% {
    transform: translateX(0)
  }
  12.5% {
    transform: translateX(0%);
  }
  25% {
    transform: translateX(-25%);
  }
  37.5% {
    transform: translateX(-25%)
  }
  50% {
    transform: translateX(-50%)
  }
  62.5% {
    transform: translateX(-50%)
  }
  75% {
    transform: translateX(00%);
  }
  89.5% {
    transform: translateX(00%)
  }
  100% {
    transform: translateX(00%)
  }
}

JavaScript

$('.next').on('click', function() {
  var active = $('img.active');
  var next = active.next('img');

  if (next.length) {
    active.removeClass('active');
    next.addClass('active');
  } else {
    active.removeClass('active');
    $('.images img:first').addClass('active');
  }
});

$('.previous').on('click', function() {
  var active = $('img.active');
  var prev = active.prev('img');

  if (prev.length) {
    active.removeClass('active');
    prev.addClass('active');
  } else {
    active.removeClass('active');
    $('.images img:last').addClass('active');
  }
});
$(".frame").height($(document).height()/2);