leanSlider demo

HTML

<script src="http://dev7studios.com/lean-slider/scripts/lean-slider/lean-slider.js"></script>
<link rel="stylesheet" href="http://dev7studios.com/lean-slider/scripts/lean-slider/lean-slider.css">
<div class="slider-wrapper">
    <div id="slider" class="hidden">
        <div class="slide1">
            <img src="http://25.media.tumblr.com/c59b15dc61407d3ff8c8573ef11a295d/tumblr_msk1lolWVp1shwmqio1_250.png" alt="" />
        </div>
        <div class="slide2">
            <img src="http://31.media.tumblr.com/6eb138e8b095252c6e1a70e77a7c56a5/tumblr_msk1oh7OJb1shwmqio1_500.png" alt="" />
        </div>
        <div class="slide3">
            <img src="http://24.media.tumblr.com/c8f18a7651e115c25bb8c2cf87f389f9/tumblr_msk4doaWnJ1shwmqio1_500.png" alt="" />
        </div>
    </div>
    <div id="slider-direction-nav"></div>
    <div id="slider-control-nav"></div>
</div>

CSS

.slider-wrapper {
     position: relative;
     background: #fff url(images/loading.gif) no-repeat 50% 50%;
     -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
     -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
 }
 .lean-slider {
     overflow: hidden;
 }
 .lean-slider-slide {
     display: block;
     position: relative;
     opacity: 0;
     -webkit-transition: opacity 0.6s linear;
     -moz-transition: opacity 0.6s linear;
     -ms-transition: opacity 0.6s linear;
     -o-transition: opacity 0.6s linear;
     transition: opacity 0.6s linear;
 }
 .lean-slider-slide.current {
     opacity: 1;
 }
 .lean-slider-slide img {
     display: block;
     height: 250px;
     width: 514px;
 }
 #slider-direction-nav {
     position: absolute;
     left: 0;
     top: 47%;
     width: 100%;
     -webkit-transition: opacity 0.2s linear;
     -moz-transition: opacity 0.2s linear;
     -ms-transition: opacity 0.2s linear;
     -o-transition: opacity 0.2s linear;
     transition: opacity 0.2s linear;
     opacity: 0.2;
 }
 .slider-wrapper:hover #slider-direction-nav {
     opacity: 1;
 }
 #slider-direction-nav a {
     float: left;
     display: block;
     width: 26px;
     height: 37px;
     background: url(images/arrows.png) no-repeat 0 0;
     text-indent: -9999px;
 }
 #slider-direction-nav .lean-slider-next {
     float: right;
     background-position: 100% 0;
 }
 #slider-control-nav {
     position: absolute;
     left: 0;
     bottom: 10px;
     width: 100%;
     text-align: center;
     -webkit-transition: opacity 0.2s linear;
     -moz-transition: opacity 0.2s linear;
     -ms-transition: opacity 0.2s linear;
     -o-transition: opacity 0.2s linear;
     transition: opacity 0.2s linear;
     opacity: 0.2;
 }
 .slider-wrapper:hover #slider-control-nav {
     opacity: 1;
 }
 #slider-control-nav a {
     display: inline-block;
     width: 14px;
     height: 14px;
     background: url(images/bullets.png) no-repeat 0 0;
    ...

JavaScript

$(document).ready(function () {
    var $slider = $('#slider').leanSlider({
        directionNav: '#slider-direction-nav',
        controlNav: '#slider-control-nav'
    });
    $slider.removeClass("hidden");
});