A CodePen by Tim Pietrusky. CodePen Slid0r Widget - A CodePen Slid0r Widget using the unoffical CodePen API. Jeah.

index.html

<!--
  CodePen Slid0r Widget. 

  A CodePen Slid0r Widget using the unoffical CodePen API.

  Unoffical CodePen API:
  http://github.com/TimPietrusky/codepen-awesomepi

  2012 by Tim Pietrusky
  timpietrusky.com
-->
<div class="CodePen-Slid0r">
 <h1>A CodePen Slid0r Widget using the unoffical CodePen API.</h1>
</div>​

script.js

/*
 * Using the unoffical CodePen API to get the Editor's Picks.
 * http://github.com/TimPietrusky/codepen-awesomepi
 */
$.ajax({
    dataType: 'jsonp', 
    jsonp: 'jsonp',
    url: 'http://codepen-awesomepi.timpietrusky.com/picks',
    success: function(data) {
      if (data.content != null) {
        start(data.content.pens);
      }
    }
});

/*
 * Create and show the iframes holding the pens
 */
function start(pens) {
  // Clear 
  $('.CodePen-Slid0r').html('');
    
  // Create iframes
  $.each(pens, function(i, v) {
    var wrapper = $('<div class="wrapper"></div>');
      
    var link = $('<a href="" target="_blank"></a>');
    link.attr('href', this.url.pen);
    
    var iframe = $('<iframe></iframe>');
    iframe.attr('frameborder', 0);
    iframe.attr('scrolling', 'no');
    iframe.attr('allowtransparency', 0);
    iframe.attr('class', 'iframe' + i);
    iframe.attr('src', this.url.fullgrid);
      
    // Show first in the line
    if (i == 0) {
      wrapper.attr('class', 'wrapper show');
    }
   
    // meta
    var meta = $('<div class="meta"></div>');

    var meta_author = $('<img src="'+this.user.gravatar+'">' 
                     + '<h1>' + this.user.realname + '</h1>');
    
    var meta_title = $('<h2></h2>');
    if (this.title != null) {
      meta_title.html(this.title);
    }
    
    var meta_social = $('<div class="social"></div>');
    meta_social.append(this.views + ' <span class="views">&#9786;</span>');
    meta_social.append('&nbsp;&nbsp;');
    meta_social.append(this.hearts + ' <span class="hearts">&#9829;</span>');
    
    meta_author.appendTo(meta);
    meta_title.appendTo(meta);
    meta_social.appendTo(meta);
      
    iframe.appendTo(link);
    meta.appendTo(link);
    wrapper.append(link);
      
    wrapper.appendTo('.CodePen-Slid0r');
  });

    setTimeout(function() {
        rotate();
    }, 0);
}
    
function rotate() {
    var iframes = $('.CodePen-Slid0r .wrapper');
    
    setInterval(function() {
        $.each(iframes, function(i, v) {
            iframes[i] = $(iframes[i]);
            
            if (iframes[i].hasClass('show')) {
               iframes[i].removeClass('show');
                
               if (iframes[i+1] != undefined) {
                 $(iframes[i+1]).addClass('show'); 
               } else {
                 iframes[0].addClass('show');
               }
                
               return false;
            }
        });
    }, 3000);
}

style.css

* {
 box-sizing: border-box;
 transition: all .9s ease-out;
}

body {
 background:url(http://codepen.io/images/classy_fabric.png);   
}

a {
 display:block;
    position:relative;
    float:clear;
}

h1 {
  font:4em "HelveticaNeue-CondensedBold", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.CodePen-Slid0r {
    padding:0;
    margin:0;
    position:relative;
}

.CodePen-Slid0r .wrapper {
  position:relative;
  width:100%;
  height:0;
    
  visibility:hidden;
  opacity:0;
  overflow:hidden;
    
  padding:0;
  float:left;
  background: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.2);
}

.CodePen-Slid0r .wrapper.show a {
  height:100%;
  width:100%;
}

.CodePen-Slid0r .wrapper.show {
  visibility:visible;
  opacity:1;
  height:650px;
  padding-bottom:5px;
}

.CodePen-Slid0r iframe {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:0;
  visibility:hidden;
  opacity:0;
  overflow:hidden;
  background:#fff;
}
.CodePen-Slid0r .wrapper.show iframe {
  visibility:visible;
  opacity:1;
  height:850px;
  width:100%;
}

.meta {
  position:absolute;
  bottom:5%;
  left:1%;
  z-index:1337;
  background:rgba(0,0,0,.9);
  border:10px solid rgba(153, 153, 153, .2);
  border-radius:10px;
  float:left;
  height:110px;
  width:140%;
  overflow:hidden;

  padding:5px;
}  

.meta h1,
.meta h2 {
  float:left;
  font:3em "HelveticaNeue-CondensedBold", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  color:#fff;
  margin:5px;
}

.meta h2 {
  color:#76DAFF;
  font-size:1.5em;
  line-height:3em;
  overflow-y:hidden;
  height:80px;
}

.meta img {
  float:left;
  margin-right:10px;
  height:80px;
  width:80px;
}

.meta .social {
  position:absolute;
  z-index:1338;
  right:30%;
  top:-40%;
  color:#fff;
  font:1.25em "HelveticaNeue-CondensedBold", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  line-height:3em;
  background:rgba(40, 40, 40, .9);
  height:100%;
  padding:25px 10px 0 10px;
  border-radius:5px;
}

.meta .social span {
  font-size:1.2em;
  margin-right:5px;
}
​