Slider Pro, un slider elegante para las imágenes


Slider Pro, un slider elegante para las imágenes, puedes usar diferentes modalidades con este plugin, es responsive y esta preparado para sistemas touch,entre las principales ventajas que tiene este plugin puedes encontrarte con:

1.- arquitectura modular y sensible
2.- Touch
3.- Transiciones con CSS3
4.- Capas de animación (y estática)
5.- Desplazamiento infinito (scrolling)
6.- Diseño de carrusel
7.- Carga de espera con lazy load.
8.- Retina habilitado.
9.- Soporte de pantalla completa
10.- Controles de navegación en CSS (no sólo gráficos) para una fácil personalización
11.- Soporte de vídeo
12.- Imágenes condicionales (diferentes imágenes para diferentes tamaños de pantalla).

Los archivo que se requiere para usar este plugin son:
Archivos CSS:

[html]
<link rel="stylesheet" href="dist/css/slider-pro.min.css"/>
[/html]

Archivos javascript:

[html]
<script src="libs/js/jquery-1.11.0.min.js"></script>
<script src="dist/js/jquery.sliderPro.min.js"></script>
[/html]

Estructura html para las imágenes:

[html]

<div class="slider-pro" id="my-slider">
<div class="sp-slides">
<!– Slide 1 –>
<div class="sp-slide">
<img class="sp-image" src="path/to/image1.jpg"/>
</div>

<!– Slide 2 –>
<div class="sp-slide">
<p>Lorem ipsum dolor sit amet</p>
</div>

<!– Slide 3 –>
<div class="sp-slide">
<h3 class="sp-layer">Lorem ipsum dolor sit amet</h3>
<p class="sp-layer">consectetur adipisicing elit</p>
</div>
</div>
</div>

[/html]

La parte más importante:

[javascript]

<script type="text/javascript">
jQuery( document ).ready(function( $ ) {
$( ‘#my-slider’ ).sliderPro();
});
</script>

[/javascript]

Puedes ver una demostración del plugin y tener una idea de lo que se puede realizar, solo tienes que visitar este enlace: http://bqworks.com/slider-pro/ y seleccionar la modalidad que más te guste.

 

[adjuntos descripcion=”Slider Pro” link=”github.com/bqworks/slider-pro/archive/master.zip”]