JSFiddle - React, Tailwind, and code Playground

by Alireza Safian

HTML

<div class="container">
  <div class="slide">
    <img src="http://placehold.it/350x150">
    <img src="http://placehold.it/350x150">
    <img src="http://placehold.it/350x150">
  </div>
  <input type="button" value="next" />
  <input type="button" value="prev" />
</div>

CSS

.slide {
  height: 150px;
  width: 1050px;
  transition: all 0.2s ease;
  position: absolute;
}

.container {
  position: relative;
  width: 350px;
  height: 180px;
  overflow: hidden;
  margin: 0 auto;
}

img {
  float: left;
}

input {
  margin-top: 150px;
}

JavaScript

$(document).ready(function () {

  $('input[value=next]').click(
    function () {

      if ($('.slide').css('margin-left').replace("px", "") > -700) {
        var margin_left = parseInt($('.slide').css('margin-left').replace("px", ""));
        $('.slide').css('margin-left', ($('.slide').css('margin-left').replace("px", "") - 350) + "px");
      }

    });

  $('input[value=prev]').click(
    function () {

      if ($('.slide').css('margin-left').replace("px", "") < 0) {
        console.log($('.slide').css('margin-left'));
        var margin_left = parseInt($('.slide').css('margin-left').replace("px", ""));
        $('.slide').css('margin-left', (margin_left + 350) + "px");
      }

    });
});