Adaptador, diapositivas con jQuery en 3D

Adaptador es un plugin ligero para jQuery que logra un efecto slider (deslizante) del contenido HTML y especialmente de imágenes, ó diapositivas. La característica más llamativa de este plugin es que realiza un slider con efecto 3D, ó rotación en forma de cubo de las imágenes, además de lo ya conocidos efectos: scroll, blind y fade. El plugin trabaja con HTML 5 y CSS 3, el plugin detecta si el navegador soporta esto, caso contrario mostrará un efecto simple de transición. 

Este tipo de plugin hay que usarlo con mucha discreción y depende del contenido, y el más adecuado son las imágenes ó fotográfias.

Uso básico

La estructura HTML es la siguiente:

<div class="slider-viewport"><!-- works as a viewport for the 3D transitions -->
  <div class="content-box"><!-- the 3d box -->
    <figure><!-- first slide -->
      <img src="img/slide-1.png">
      <figcaption>This is slide one's description</figcaption>
    </figure>
    <figure>
      <img src="img/slide-2.png">
      <figcaption>This is slide two's description</figcaption>
    </figure>
    <figure>
      <img src="img/slide-3.png">
      <figcaption>This is slide three's description</figcaption>
    </figure>
    <figure class="slide">
      <img src="img/slide-4.png">
      <figcaption>This is slide four's description</figcaption>
    </figure>
  </div>
</div>

Aplicar los siguientes estilos CSS al anterior código:

.slider-viewport, .content-box, .slide { width: 600px; height: 400px }
.content-box { overflow: hidden } /* stop slides overflowing */

Incluimos la referencia a jQuery y más abajo configuramos la propiedades para el funcionamiento del plugin.

<script src="js/jquery.min.js"></script>
<script src="js/box-slider-all.jquery.min.js"></script>


// dentro del body
$('.content-box').boxSlider({
    autoScroll: true
  , timeout: 5000
  , speed: 1200
  , pauseOnHover: true
});

El resultado lo puedes ver aca. Descargar plugin.