Orbit, un plugina para crear un slider de imágenes. Programación en Castellano.

Categorías destacadas

Artículo

Inicio Artículo Lenguajes de script Javascript

¡votar!

Orbit, un plugina para crear un slider de imágenes

Crear un slider de imágenes puede ser muy sencillo debido a la gran cantidad de librerías que están creadas para facilitarnos nuestro trabajo. Uno de estas librería es Orbit, un plugin para jQuery que nos facilita mucho el desarrollo del slider, además de ser muy ligero y muy sencillo de implementar en nuestras aplicaciones.

El plugin lo podemos descargar desde este enlace.

Una vez descargardo, para su utilización, debemos de incluir la librería jQuery y la Orbit en nuestro proyecto.

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.orbit.min.js" type="text/javascript"></script>

También debemos de incluir la hoja de estilos que utilizará la librería.

<link rel="stylesheet" href="css/orbit.css">

El siguiente paso será crear la estructura de imágenes que formarán parte de nuestro slider.

<div id="featured"> 
<img src="link.jpg" alt="Link" />
<a href="www.zurb.com/playground"><img src="ezio.jpg" alt="Ezio" /></a>
<img src="masterchief.jpg" alt="Master Chief" />
<img src="marcusfenix.jpg"  alt="Marcus Fenix" />
</div>

Un par de notas antes de seguir. Orbit determina de forma automática el ancho y alto de las imágenes de forma automática, pero debemos de intentar que todas las imágenes tengan el mismo tamaño, para una mejor visualización. La segunda es que el ID del contenedor puede tener el nombre que queramos, no tiene que ser el mismo que hemos indicado en el ejemplo.

Para poner en marcha el plugin, debemos de utilizar lo siguiente.

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

Esta es la forma más estándar de generar el slider, pero se puede utilizar una serie de opciones para configurar su funcionamiento. Veamos que opciones se pueden utilizar.

$('#featured').orbit({          
animation: 'fade',
animationSpeed: 800, 
advanceSpeed: 4000,
startClockOnMouseOut: true, 
startClockOnMouseOutAfter: 3000, 
directionalNav: true, 
captions: true, 
captionAnimationSpeed: 800,  
timer: false,
bullets: false, 
});

animation: Se determina el tipo de animación del slider. Puede tomar como valores “fade”, “horizontal-slide” o “vertical-slide”.
animationSpeed: Velocidad con la que se produce la animación.
advanceSpeed: Tiempo que transcurre entre transiciones.
startClockOnMouseOut: Si el tiempo debe ser reiniciado en el mouseOut
startClockOnMouseOutAfter: El tiempo que debe de transcurrir para volver a empezar después del mouseOut.
directionalNav: Si se pone a true, entonces se podrá mover de forma manual.
captions: Si la imagen tiene título, esta aparecerá en la parte de abajo.
captionAnimationSpeed: Tiempo que tardará en aparecer el título en las imágenes que lo tengan.
timer: Si se quiere un tiempo circular
bullets: Para activar la navegación bullet