SummArg | Cursos y recursos para webmasters

11/11/2010

Easy Slider, un plugin con muchas opciones

Los sliders son opciones muy interesantes a la hora de realzar contenido en un website. Basta con elegir buenas imagenes para mostrar y el script las deslizará suavemente para mostrarlas una a una. Este slider no solo es muy completo sino que además es muy simple de configurar.

Algunas de sus características son:

  • Auto Slide y Slide Continuo.
  • Botón “Ir al principio” y botón “Ir al final”.
  • Esconder o personalizar los botones.
  • Slide vertical.
  • Múltiples Slides por página.
  • Paginación con números.

Demo con slide continuo | Demo con paginación numérica | Múltiples sliders

Instalación y Uso

Tras descargar los archivos de la última versión en el sitio del autor, descomprimimos el zip dentro del raíz del website y entre etiquetas <head></head> en la página en que vamos a colocar el slider insertamos el siguiente código:

	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/easySlider1.7.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#slider").easySlider({
				auto: true,
				continuous: true
			});
		});
	</script>
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />

Cómo veran en nuestro encabezado colocamos unicamente dos opciones, pero podemos controlar una gran variedad de atributos de nuestro slider:

prevId: 		'prevBtn',
prevText: 		'Previous',
nextId: 		'nextBtn',
nextText: 		'Next',
controlsShow:		true,
controlsBefore:	'',
controlsAfter:		'',
controlsFade:		true,
firstId: 		'firstBtn',
firstText: 		'First',
firstShow:		false,
lastId: 		'lastBtn',
lastText: 		'Last',
lastShow:		false,
vertical:		false,
speed: 		800,
auto:			false,
pause:			2000,
continuous:		false,
numeric: 		false,
numericId: 		'controls'

Ver el detalle de cada una de las opciones en la web del plugin.

Para insertar el slider entre etiquetas <body></body> colocamos:

<div id="slider">
			<ul>
				<li><a href="#"><img src="images/01.jpg" alt="imagen" /></a></li>
				<li><a href="#"><img src="images/02.jpg" alt="imagen" /></a></li>
				<li><a href="#"><img src="images/03.jpg" alt="imagen" /></a></li>
			</ul>
</div>

Cuidamos que cada ruta coincida con la estructura de nuestro sitio y el slider quedará funcionando.

Dejar un comentario

  1. Gracias por el post. Excelente slider y fácil de configurar, muy recomendable

Dejar un comentario