JSFiddle - React, Tailwind, and code Playground

by Sam Fereday

HTML

<div id="registration">
  <div class="slide-container">
    <div class="slide">
      Form Content 1
    </div>
    <div class="slide">
      Form Content 2
    </div>
    <div class="slide">
      Form Content 3
    </div>
    <div class="slide">
      Form Content 4
    </div>
  </div>
</div>
<button>
  Next
</button>

CSS

body {
  font: 75%/1.4em arial;
}

div {
  box-sizing: border-box;
}

#registration {
  width: 100px;
  overflow: hidden;
}

.slide-container {
  width: 200px;
  min-height: 2em;
  transition: all 0.2s ease;
}

.slide {
  width: 100px;
  padding: 2em;
  float: left;
  text-align: center;
  background: #fff;
}

button {
  width: 100px;
  margin: 1em 0;
  padding: 1em;
}

JavaScript

var slidecontainer = $('.slide-container'),
  slides = slidecontainer.find('.slide'),
  slidewidth = 100, // Real dodgy if we query the selector.
  slidenumber = slides.length,
  newMargin = 0,
  prevMargin = 0,
  maxwidth = slidewidth * slidenumber;

function nextSlide()
{

  newMargin = prevMargin + (slidecontainer.width() / slidenumber);

  if (newMargin >= maxwidth)
    newMargin = 0;

  slidecontainer.css({
    'margin-left': -newMargin + 'px'
  });

  prevMargin = newMargin;

}

slidecontainer.css({
  'width': maxwidth + 'px'
});

$('button').click(nextSlide);