Hace tiempo que llevaba queriendo escribir este post, es bastante simple, y no voy a entrar en demasiado detalle de diseño o de maquetación, simplemente explicaré paso a paso cómo integrar un slider de imágenes en una web. En este caso se trata de FlexSlider, un slider jQuery que se adapta al tamaño del contenedor que lo integra, con lo que junto con un layout responsive conseguiremos una gran flexibilidad.

DEMO DESCARGAR

Breve resumen de los contenidos usados para hacer este manual:

• HTML/CSS: Layout hecha con 1140px CSS Grid.
• Slider: FlexSlider, del cual se han usado los ficheros
• jquery.flexslider-min.js
• flexslider.css
• y el directorio theme
• Imágenes: He cogido unas cuantas imágenes con licencia CC del usuario de Flickr Takedown161.

Antes de cargar el código del plugin, vamos a ver el html necesario para que el slider que vamos a usar funcione:

<div class="flex-container">
	<div class="flexslider">
		<ul class="slides">
			<li><img src="img/img1.jpg"/></li>
			<li><img src="img/img2.jpg"/></li>
			<li><img src="img/img3.jpg"/></li>
			<li><img src="img/img4.jpg"/></li>
			<li><img src="img/img5.jpg"/></li>
		</ul>
	</div>
</div>

El css necesario para que el slider se vea con el estilo por defecto se carga con la siguiente línea:

<link rel="stylesheet" href="css/flexslider.css">

Como para cualquier plugin jQuery que queramos usar en nuestra web, primero tenemos que asegurarnos de que tenemos cargado jQuery antes:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Debajo de este código que obtiene el código de los servidores de Google, ya podemos incluir el script del plugin y el código javascript que hará que para el objeto html con clase .flexslider se cargue el plugin correspondiente:

<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider({
    	controlsContainer: '.flex-container'
    });
  });
</script>

Y esto es todo, con estas simples líneas tenemos integrado un slider flexible en nuestra web.

DEMO DESCARGAR