CSS Carousel

HTML

<div id="curr">
  <div id="nxt">
    <div class="album">Walk-Up</div>
    <button data-left="0px">0</button>
    <div class="album">ID</div>
    <button data-left="-25px">25</button>
    <div class="journal">Customer</div>
    <button data-left="-50px">50</button>
    <div class="journal">Recipient</div>
    <button data-left="-75px">75</button>
    <div class="journal">Package</div>
    <button data-left="-25px">100</button>
  </div>
</div>

<br />

<br />

<br />

<br />

<br />

CSS

#curr {
  width: 25px;
  height: 100px;
  border: 1px solid red;
  position: relative;
}

#nxt {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  transition: left 100ms;
}

.album {
  width: 25px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
  float: left;
}

.journal {
  width: 25px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
  float: left;
}

JavaScript

$('button').click(function() {
  $('#nxt').css({
    left: $(this).data('left')
  });
});