En este caso vamos a realizar la instalación del plugin SlidesJS con el que agregaremos un slide de imágenes en nuestra página web.
Para descargarlo haz clic en este enlace hacia la web oficial y a continuación pulsa en Download.
A continuación, tras descomprimir el archivo descargado iremos a la carpeta source y copiaremos el archivo slides.min.jquery a nuestro proyecto para luego enlazarlo a nuestras páginas web.
Para configurar SlidesJS crearemos un 'DIV' (cuyo atributo 'id' será slides_container) con las imágenes que deseamos mostrar, que a su vez estará dentro de otro 'DIV' contenedor (cuyo atributo 'id' será slides).
A continuación, desde JQuery accederemos a dicho contenedor llamando al método slides() del plugin, el cual dispone entre otros de los siguientes métodos (para más información consulta los enlaces al final de esta sección):
- preload(): permite realizar una precarga de las imágenes.
- container(): permite indicar el nombre del contenedor de las imágenes.
- generateNextPrev : genera automáticamente botones para saltar a la imagen anterior y la siguiente.
- prev(): permite indicar otro nombre de clase CSS a usar para el botón que carga la imagen anterior.
- pagination(): desactivar la paginación.
- generatePagination(): generar la paginación automáticamente.
- paginationClass: permite indicar otro nombre de clase CSS a usar para la paginación.
- randomize(): mostrar las diapositivas de forma aleatoria, en lugar de por el orden indicado.
- play(): inicia la presentación automáticamente, pudiendo indicar el número (de milisegundos) que se tardará en mostrar otra imagen.
Una vez insertada la presentación por defecto se mostrará una lista numerada que a modo de paginación nos permitirá visualizar una determinada imagen. Quizás esta parte te resulte algo complicada si no posees conocimientos de CSS suficientes para definir los estilos apropiados con los que darle un aspecto más atractivo (por ejemplo haciendo que se muestren imágenes en lugar de los números de la lista).
Por otro lado, si deseamos agregar botones con los que dar la posibilidad de visualizar las imágenes anterior y siguiente, crearemos dos enlaces a los que asignaremos las clases CSS prev y next respectivamente.
Veamos ahora un código de ejemplo que te ayudará a comprender cómo configurar este plugin:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Slide de imágenes con JQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
/* Con las siguientes dos clases configuramos algunos aspectos del SlidesJS: */
/* DIV que muestra la imagen*/
.slides_container { position:relative;display:none;width:500px;overflow:hidden;height:375px;text-align:center;border:10px solid black; }
.slides_container div { width:500px;height:380px;display:block; }
.slides_container a { display:block;width:500px;height:375px; }
.slides_container a img { display:block; }
/* Botones */
#botones { width:500px;margin-top:20px;text-align:center; }
.prev img { border-style:none; }
.next img { border-style:none; }
/* Paginación */
.pagination { position:absolute;top:410px;left:420px;width:500px; }
.pagination li { float:left;margin:0px 1px;list-style:none; }
.pagination li.current a { background-position:0px -12px; }
.pagination li a {
display:block;
width:12px;
height:0;
padding-top:12px;
background-image:url('paginacion.png');
background-position:0 0;
float:left;
overflow:hidden;
}
</style>
<!-- Agregamos JQuery -->
<script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>
<!-- Agregamos el plugin de SlidesJS -->
<script type="text/javascript" src="../lib/slides.min.jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#slides").slides({
play:5000
});
});
</script>
</head>
<body>
<div id="slides">
<div class="slides_container">
<div><img src="./images/01.jpg" alt="" /></div>
<div><img src="./images/02.jpg" alt="" /></div>
<div><img src="./images/03.jpg" alt="" /></div>
<div><img src="./images/04.jpg" alt="" /></div>
<div><img src="./images/05.jpg" alt="" /></div>
</div>
<div id="botones">
<a href="#" class="prev"><img src="anterior.jpg" alt="" /></a>
<a href="#" class="next"><img src="siguiente.jpg" alt="" /></a>
</div>
</div>
</body>
</html>
EXPLICACIÓN: hemos creado un 'DIV' principal que a su vez contiene otros con las imágenes a visualizar, y otro más con los botones que permitirán desplazarnos entre ellas. Asimismo, es importante resaltar el uso de los estilos CSS mediante los que configuramos un aspecto visual más atractivo de cara al usuario.
Vea también: [ Documentación de SlidesJS ] - [ Ejemplos de SlidesJS ] - [ Tutorial CSS ]
