Orbit es un ligero plugin para jQuery (pesa sólo 2.8KB) que nos permite crear un slider de imágenes, la visualización de las imágenes puede ser automática (ya que cuenta con botones Play y Pause) o manual mediante dos botones para deslizar las imágenes hacia la derecha o izquierda.

Su código es fácil de entender y simple de utilizar, sólo basta con descargar el pack con los archivos necesarios y copiarlos en la carpeta de nuestro proyecto:

Primero incluímos el archivo CSS y las librerías JavaScript incluídas en el pack que descargamos:

<link rel="stylesheet" type="text/css" href="css/orbit.css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.orbit.min.js" type="text/javascript"></script>

Ejecutamos el plugin:

<script type="text/javascript">
     $(window).load(function() {
         $('#featured').orbit();
     });
</script>

Finalmente añadimos el código HTML para generar el slider:

<div id="featured"> 
     <img src="link.jpg" title="Link galliantly riding the majestic Epona across the hyrulian plains" alt="Link" />
     <img src="ezio.jpg"  alt="Ezio" />
     <img src="masterchief.jpg" title="Master Chief surveying Reach, home of his upcoming game"  alt="Master Chief" />
     <img src="marcusfenix.jpg"  alt="Marcus Fenix" />
</div>

Con eso tendremos las opciones básicas, pero Orbit incluye otras más que pueden ser activadas si se desean, para ello podemos usar el siguiente código:

$('#featured').orbit({          
     animation: 'fade', //fade, horizontal-slide, vertical-slide
     animationSpeed: 800, // nivel de rapidez de la animación
     advanceSpeed: 4000, // tiempo (en milisegundos) de transición entre imágenes, si el temporizador está activado
     startClockOnMouseOut: true, // si el temporizador debe reiniciarse luego del evento MouseOut
     startClockOnMouseOutAfter: 3000, // tiempo (en milisegundos) en que el temporizador debe reiniciarse luego del evento MouseOut
     directionalNav: true, // activar la navegación manualmente
     captions: true, // mostrar las leyendas (relacionada con la propiedad title del tag <img />)
     captionAnimationSpeed: 800, // rapidez de la aparición y desaparición de las leyendas
     timer: false // visualizar el temporizador
});

Ahora ya tenemos nuestro slider de imágenes que fácilmente podremos utilizar, por ejemplo, para mostrar los posts destacados de nuestro blog.

Enlace, demo y descarga: Orbit