Orbit Slider

Orbit Ready

HTML

<script src="http://www.zurb.com/playground/javascripts/plugins/jquery.orbit.min.js"></script>
<div id="featured"> 
     <img src="http://www.zurb.com/playground/playground/jquery-image-slider-plugin/overflow.jpg" alt="Overflow: Hidden No More" />
     <img src="http://www.zurb.com/playground/playground/jquery-image-slider-plugin/captions.jpg"  alt="HTML Captions" />
     <img src="http://www.zurb.com/playground/playground/jquery-image-slider-plugin/features.jpg" alt="and more features" />
</div>

CSS

div.orbit-wrapper {
    width: 1px;
    height: 1px;
    position: relative; }

div.orbit {
    width: 1px;
    height: 1px;
    position: relative;
    overflow: hidden }

div.orbit img {
    position: absolute;
    top: 0;
    left: 0;
    display: none; }

div.orbit a img {
    border: none }

.orbit div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }


/* TIMER
   ================================================== */

div.timer {
    width: 40px;
    height: 40px;
    overflow: hidden;
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: .6;
    cursor: pointer;
    z-index: 1001; }

span.rotator {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: -20px;
    background: url(http://www.zurb.com/playground/playground/jquery-image-slider-plugin/orbit/rotator-black.png) no-repeat;
    z-index: 3; }

span.mask {
    display: block;
    width: 20px;
    height: 40px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    overflow: hidden; }

span.rotator.move {
    left: 0 }

span.mask.move {
    width: 40px;
    left: 0;
    background: url(http://www.zurb.com/playground/playground/jquery-image-slider-plugin/orbit/timer-black.png) repeat 0 0; }

span.pause {
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    background: url(http://www.zurb.com/playground/playground/jquery-image-slider-plugin/orbit/pause-black.png) no-repeat;
    z-index: 4;
    opacity: 0; }

span.pause.active {
    background: url(http://www.zurb.com/playground/playground/jquery-image-slider-plugin/orbit/pause-black.png) no-repeat 0 -40px }

div.timer:hover span.pause,
span.pause.active {
    opacity: 1 }


/* CAPTIONS
   ================================================== */

.orbit-caption {
    display: none }

.orbit-wrapper .orbit-caption {
    background: #000...

JavaScript

$('#featured').orbit({
    bullets: true,
    class: "hoal"
});