Slider Responsive con CSS3 y Javascript

por Andrés Moreno

Slide-Show Responsivo con CSS 3 y JavaScript Nativo

Este Slide-Show está inspirado en el de unslider.com, con la peculiaridad de no usar framework o librerías externas tipo JQuery, Prototype, Mootoools, etc. Las características que tiene esta demo son similares a las que proporciona unslider.com:

Navegación:

Por mousewheel del ratón
Por teclado
Por enlaces
Táctil para el móvil

Responsivo

Se adapta perfectamente al tamaño de la pantalla en el que se visualza. Pruebalo reduciendo el tamaño del browser con el que estes visitando esta página.

Configurable

Con unas pocas líneas de CSS puedes configurar el ancho y/o alto máximo de la galería. Es importante tener conocimientos básicos sobre las hojas de estilo. Para ello puedes sobreescribir las propiedades CSS en tú hoja de estilos, o puedes descargar la librería y modificar el CSS a tú gusto.

¿Cómo usar este SLIDE-SHOW?

En primer lugar debes descargar la librería o enlazar la librería desde tú código copiando estas líneas entre las etiquetas <head> del documento HTML:


				<link rel="stylesheet" href="http://ubuntuone.com/7CcSCFAincrPmWZYOnMJA9" type="text/css" media="screen" />

				<script type="text/javascript" src="http://ubuntuone.com/1CGmD4rRCsLBvL2ZzLFBgc"></script>

Escribe el marcado que muestran estas líneas en tu documento HTML, sustituyendo los elementos entre corchetes [ ] por los que desees:


				<div id="galeria-principal" class="galeria">

					<ul id="lista-galeria">

						<li title="[Titulo imagen]" data-subtitulo="[subtitulo]"><img src="[pathimagen]" alt="[Texto alternativo imagen]" width="[Indicar tamaño real de imagen en px]" /></li>

						<li title="[Titulo imagen]" data-subtitulo="[subtitulo]"><img src="[pathimagen]" alt="[Texto alternativo imagen]" width="[Indicar tamaño real de imagen en px]" /></li>

						<li title="[Titulo imagen]" data-subtitulo="[subtitulo]"><img src="[pathimagen]" alt="[Texto alternativo imagen]" width="[Indicar tamaño real de imagen en px]" /></li>

					</ul>

					<div class="botones">

						<a href="#" id="left" class="boton">⟨</a>

						<a href="#" id="right" class="boton">⟩</a>

					</div>

				</div>

Añade tantos elementos de este tipo como desees:


				<li title="[Titulo imagen]" data-subtitulo="[subtitulo]"><img src="[pathimagen]" alt="[Texto alternativo imagen]" width="[Indicar tamaño real de imagen en px]" /></li>

Por defecto no está activa el automovimiento. Solo tienes que añadir las siguientes líneas antes del </body> si quieres activarlo:


				<script type="text/javascript">
					setInterval(irderecha, 5000);	
				</script>

Soporte Internet Explorer 8

Si quieres que tenga soporte para este navegador puedes incluir estas dos librerías. Una es para corregir los bug propios de este navegador. La segunda es para dar soporte a las mediaqueries a este navegador. Recomiendo incluirlo dentro de comentarios condicionales.


			   	<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
	
			   	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>

Limitaciones

Solo es posible incluir una galería por página.

Errores conocidos

Internet Explorer

No es compatible con versiones anteriores a Internet Explorer 8.

Las limitaciones de Internet Explorer 8 serán perceptibles, ya que muchas de las propiedades utilizadas en la hoja de estilos son de la especificación CSS 3, y las transiciones no serán soportadas para este navegador.

En las versiones más modernas de Internet Explorer, como la 9 o la 10, no he comprobado su funcionamiento.

Navegación táctil

Aunque la función táctil funciona, en según que navegadores móviles el comportamiento no es el adecuado. Estoy trabajando en ello para solucionarlo.