Slider Pro, un slider elegante para las imágenes

DESCARGA : Slider Pro

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:

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

Archivos javascript:

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

Estructura html para las imágenes:


<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>

La parte más importante:


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

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.

 

Puede interesarte