Adaptador, diapositivas con jQuery en 3D
10-08-2012 HTML 5, Desarrollo Web, CSS, JavaScript 1549 hits (13.54 %) 1 comentariosAdaptador 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.


1 comentarios a "Adaptador, diapositivas con jQuery en 3D"
Comentar