Hola, en esta nueva publicación te mostraremos una manera sencilla de crear tu propio slider de imágenes para tu página web.
Comencemos con una pequeña introducción de lo que es un slider.
Un slider es un recurso que se utiliza para dar un diseño mas novedoso a la presentación de imágenes en un sitio web además de ser una manera de atraer la atención de los visitantes y usuarios que accedan a ella.
Requisitos:
Para realizar esta práctica necesitaras de algunas imágenes, así como también haremos uso de conocimientos en HTML, CSS y Javascript.
- Definiremos el código HTML en el cual crearemos un contenedor donde se creara el slider, lo llamaremos “caja”.
- Declararemos en el código CSS la apariencia que tomara el contenedor.
- Y por ultimo utilizaremos Javascript para el funcionamiento de este con un degradado.
Procedimiento:
- Iniciemos la práctica colocando el código HTML, dentro de la etiqueta <body> colocamos onload=”javascript:Aparecer()” para que se ejecute automáticamente al cargar la página.
- Ahora crearemos el contenedor con la etiqueta <div> en la que declararemos las imágenes <img src= dirección de imagen id= identificador de imagen>.
<!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> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>Practica</title> </head> <!--Código HTML--> <body onload="javascript:Aparecer();"> . .(imagenes) . </body>
Es importante que dentro de la etiqueta <img> se declare un identificador ya que se utilizara mas adelante.
3.- Para definir la apariencia utilizaremos CSS el cual definimos de la siguiente manera dando formato al contenedor de las imágenes.
<!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> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Practica</title>
<!--Código CSS-->
<style type="text/css">
#caja{
width:262px;
height:192px;
color:white;
font-family:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
margin:0px auto;
margin-top:30px;}
img{
width:350px;
height:200px;
position:absolute;}
</style>
</head>
<!--Código HTML-->
.
.
.
</html>
Asignamos un tamaño a las imágenes con un width y height además de la posición en la que se ubicarán las imágenes dentro del slider.
Ahora estamos listos para comenzar a introducir el código javascript.
4.- Comenzaremos creando la función Aparecer en la que utilizaremos un interval=setInterval(muestra, 20) para llamar cada 20 milisegundos una nueva función llamada muestra.
La función Aparecer llamara:
- La función detener la cual manejara un clearInterval(interval) para limpiar el intervalo.
- Y la función elige la cual se encargara de elegir y activar la visibilidad entre las imágenes del slider.
<!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> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Practica</title>
<!--Código CSS-->
.
.
.
<!--Código Javascript-->
var interval;
var i=1;
var ver=0;
function Aparecer() {
detener();
elige();
interval=setInterval(muestra, 20); }
function muestra() {
if(i>6) {
i=1;
Ocultar(); }
if(ver==0)
document.getElementById("arbol").style.opacity=i;
else
document.getElementById("nieve").style.opacity=i;
i+=0.05; }
function detener() {
clearInterval(interval); }
function elige() {
if(ver==0) {
document.getElementById("arbol").style.visibility="visible";
document.getElementById("nieve").style.visibility="hidden"; }
else {
document.getElementById("arbol").style.visibility="hidden";
document.getElementById("nieve").style.visibility="visible"; } }
</head>
<!--Código HTML-->
.
.
.
</html>
5.- La función muestra jugara un papel muy importante a la hora de mostrar y ocultar ya que manejara la transición entre imágenes jugando con la opacidad de la imagen que se muestra en el slider.
function Ocultar() {
detener();
interval=setInterval(desvanecer,20); }
function desvanecer() {
if(i<=0) {
i=0;
if(ver==0)
ver=1;
else ver=0;
elige();
Aparecer(); }
if(ver==0)
document.getElementById("arbol").style.opacity=i;
else document.getElementById("nieve").style.opacity=i;
i-=0.05; }
<!--Código HTML-->
.
.
.
</html>
6.- Mientras que la función de Ocultar se encargara con un interval=setInterval(desvanecer,20) de llamar cada 20 milisegundos a la función desvanecer esta se encargara de modificar la opacidad de la imagen que se ocultara.
De esta manera tendremos el efecto de un transición entre cada imagen del slider. Listo esta es una manera secilla de realizar un slider para tu sitio web.
Resultado:
See the Pen slider1 by Maria Gpe. Velázquez Martínez (@MarieVelmart7) on CodePen.
