JSFiddle - React, Tailwind, and code Playground

by wookiehangover

HTML

<link rel="stylesheet" href="https://github.com/paulirish/html5-boilerplate/raw/master/css/style.css">
<header>
    <h1>yet another css3 gallery</h1>
</header>

<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>

<aside class="controls">
    <a href="#" class="prev">back</a>
    <a href="#" class="next">next</a>
</aside>

CSS

.gal-wrapper {
  position: relative;
  overflow:hidden;
    width: 100%;
    height: 370px;
}

.gal-wrapper .slide {
  width: 600px; height: 370px;
  display: none;
  position: absolute; left: 50%; top: 0;
  padding-bottom:0; margin-top:0; margin-left: -300px;
  
     -moz-transition: all 0.3s ease-in-out;  
       -o-transition: all 0.3s ease-in-out;  
  -webkit-transition: all 0.3s ease-in-out;  
      -ms-transition: all 0.3s ease-in-out;  
          transition: all 0.3s ease-in-out;  

}

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


.gal-wrapper .past {
    opacity: 0;
    display:block;
     -moz-transform: scale(0.5);
       -o-transform: scale(0.5);
  -webkit-transform: scale(0.5);
      -ms-transform: scale(0.5);
          transform: scale(0.5);


}

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

}


/* just some stylez */

h2 { font-size: 3em; float:left; text-align: center; width: 100%; color: #fff; }

.controls { position: relative; width: 600px; margin: 2em auto 0; height: 40px; }

.prev { position: absolute; bottom: 0; left: 0; }
.next { position: absolute; bottom: 0; right: 0; }

.prev, 
.next {
    font-size: 14px;
    color: #777777;
    text-decoration: none;
    padding: 10px 20px;
    background: -moz-linear-gradient(
        top,
        #e3e3e3 0%,
        #e3e3e3);
    background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#e3e3e3),
        to(#e3e3e3));
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 1px solid #cccccc;
    -moz-box-shadow:
        0px 1px 1px rgba(255,255,255,1),
        inset 0px 1px 1px rgba(255,255,255,1);
    -webkit-box-shadow:
        0px 1px 1px rgba(255,255,255,1),
        inset 0px 1px 1px...

JavaScript

$('.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');

  });

  $('.next').live('click', function(e){
      e.preventDefault();
      $('.gal-wrapper').trigger('next-slide');
  })
      
  $('.prev').live('click', function(e){
      e.preventDefault();
      $('.gal-wrapper').trigger('prev-slide');
  });