yet another css3 gallery

fiddle.css

.gal-wrapper {
  width: 100%;
  height: 198px;
  position: relative;
  padding: 0 1em;
  margin: 0 -1em;
  background-image: -webkit-gradient(
    linear, left bottom, right bottom, color-stop(0.1, rgb(72,72,72)), color-stop(0.5, rgb(117,117,117)), color-stop(0.9, rgb(74,74,74))
  );

  -webkit-box-shadow: 0px 0px 4px #000 inset;
          box-shadow: 0px 0px 4px #000 inset;
}

.gal-wrapper .slide {
  width: 320px; height: 200px;
  z-index: 1; display: none;
  border: 1px solid papayaWhip;
  position: absolute; left: 50%; top: 0;
  padding-bottom:0; margin-top:0; margin-left: -160px;
  color: #fff; text-shadow: 0 1px 0 #000;
  -webkit-transition: all 400ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}

.gal-wrapper .current {
  display: block;
}


.gal-wrapper .past {
	display: block;
	opacity: 0;
	
	-webkit-transform: 	translate3d(-100%, 0, 0);
}

.gal-wrapper .future {
	display: block;
	opacity: 0;
	
	-webkit-transform: translate3d(100%, 0, 0);
}

fiddle.html

<div class="gal-wrapper>
<div class="slide current">
<h2>slide 1</h2>
</div> 
<div class="slide future">
<h2>slide 2</h2>
</div>
<div class="slide">
<h2>slide 3</h2>
</div>
<div class="slide past">
<h2>slide 4</h2>
</div>
</div>

fiddle.js

$('.gal-wrapper')
  .live('next-slide', function(e){
    var $this = $(this),

        current = $this.find('.current'),
        past = $this.find('.past'),
        future = $this.find('.future'),

        total = $this.children('.slide').length,
        next = future.index(),

        index = (next + 1) == total ? 0 : next + 1;

    current
      .removeClass('current')
      .addClass('past');

    future
      .removeClass('future')
      .addClass('current');

    past
      .removeClass('past');

    $this
      .children('.slide')
      .eq( index )
      .addClass('future');

  })
  .live('prev-slide', function(e){
     var $this = $(this),

          current = $this.find('.current'),
          past = $this.find('.past'),
          future = $this.find('.future'),

          total = $this.children('.slide').length,
          prev = past.index(),

          index = prev === 0 ? total - 1 : prev - 1;

      current
        .removeClass('current')
        .addClass('future');

      past
        .removeClass('past')
        .addClass('current');

      future
        .removeClass('future');

      $this
        .children('.slide')
        .eq( index )
        .addClass('past');

  })
  .live('swipeleft', function(e){
    $(this).trigger('next-slide');
  })
  .live('swiperight', function(e){
    $(this).trigger('prev-slide');
  });