Orbit jQuery Slider

Name: Orbit jQuery Slider
Brand: Jose Aguilar
SKU: joseaguilarblog-3351
Availability: InStock
Rating: 5 (4 reviews)

Orbit es un plugin jQuery para implementar un vitoso slide de imágenes con efecto deslizante. Éste permite reproducir automáticamente, pausar la presentación o usar los controles para avanzar o retroceder una imagen manualmente, además posee un indicador del tiempo que falta para que se deslice a la siguiente imagen.

También nos permite añadir código HTML al slider.

Su implementación es sencilla. Tan solo tendrás que añadir en el <head> de tu página la librería jQuery, el plugin y los estilos necesarios que vienen con el plugin + la llamada al script tras cargar la página.

<link rel="stylesheet" href="../orbit-1.2.3.css">
<script type="text/javascript" src="../jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../jquery.orbit-1.2.3.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
   $('#featured').orbit();
});
</script>

Y en el<body>:

<div id="featured"> 
   <div class="content" style="">
      <h1>Orbit does content now.</h1>
      <h3>Highlight me...I'm text.</h3>
   </div>
   <a href=""><img src="dummy-images/overflow.jpg" /></a>
   <img src="dummy-images/captions.jpg" data-caption="#htmlCaption" />
   <img src="dummy-images/features.jpg"  />
</div>

Al slider se le pueden añadir algunos efectos, activar o desactivar según que efectos con sus opciones:

$('#featured').orbit({
     animation: 'fade',                  // fade, horizontal-slide, vertical-slide, horizontal-push
     animationSpeed: 800,                // how fast animtions are
     timer: true,              // true or false to have the timer
     advanceSpeed: 4000,          // if timer is enabled, time between transitions 
     pauseOnHover: false,          // if you hover pauses the slider
     startClockOnMouseOut: false,      // if clock should start on MouseOut
     startClockOnMouseOutAfter: 1000,      // how long after MouseOut should the timer start again
     directionalNav: true,          // manual advancing directional navs
     captions: true,              // do you want captions?
     captionAnimation: 'fade',          // fade, slideOpen, none
     captionAnimationSpeed: 800,      // if so how quickly should they animate in
     bullets: false,             // true or false to activate the bullet navigation
     bulletThumbs: false,         // thumbnails for the bullets
     bulletThumbLocation: '',         // location from this file where thumbs will be
     afterSlideChange: function(){}      // empty function 
});

Ver más documentación

Ver ejemplo en funcionamiento