Vamos a crear un slider desarrollado con Jquery y Nivo Slider, sin necesidad de plugin y que podamos adaptar a nuestra web.
Para realizarlo vamos a utilizar el framework Jquery, que es una librería para facilitar el trabajo con el lenguaje Javascript. Descargamos la librería desde Jquery.com, también es posible que puedas usarla tirando de googleapis.com usando este código en tu página html para añadir este script.
Si lo has descargado de la página de Jquery y lo has subido a algún directorio de tu web, lo debes poner que punte hacia tu dominio como el siguiente ejemplo:
Ahora vamos a descargar Nivo slider que es la librería Jquery que nos permitira crear el slider. Desde aquí puedes descargar gratis Nivo slider. Descomprimimos el fichero en nuestro directorio, aquí podemos ver la estructura de la web.
Ahora vamos a crear un fichero index.html para nuestra web, en el encabezado pondremos las librerias y hojas de estilos. Podemos observar la librería Jquery, la librería de nivo slider y las hojas de estilo propia de Nivo slider, luego podremos personalizarlas.
Ahora vamos a crear un contenedor para nuestras imágenes y para el slider, para esto y poder mostrarlo se creo dentro del mismo index.html (También se puede crear en en fichero hojas de estilo CSS, a gusto de cada uno).
Comenzamos con la estructura de la web y del slider mismo insertandfo las imagenes a mostrar y un mensaje.
Luego activamos el plugin nivo Silder y le enviamos parametros acerca tipo de efecto, de tiempo entre animación, pausa entre imagen y muchos mas que pueden verse en la documentación de Nivo Slider.
Observemos que se activa el id #silder el mismo donde defino las imágenes, osea que si quiero tener más de un slider deberé replicar la misma estructura y activarlo para el id que corresponda.
El resultado de testear index.html en un navegador es:
Aquí vemos la segunda diapositiva, debajo vemos el numero de diapositivas 1 y 2, y los enlaces por defecto Prev( anterior) Next (siguiente) vamos a mejorar la vista de eso mediante css.
Podemos cambiar los numeros por viñetas simplemente buscando en nivo-silder.css
El resultado de este cambio será los números cómo viñetas a izquierda y los enlaces cómo flechas a la derecha.
Vamos extender la funcionalidad mostrando un bloque da datos en una de las diapositivas
Modificando el codigo que ya tenemos cambiamos el parrafo en la diapositiva 2 por un bloque al que llamare con un id #bloque2, luego Creo el bloque y le aplico un estilo oculto para que solo se vea cuando se active la diapositiva 2.
El resultado es el siguiente:
También podría poner imágenes en miniatura. Otra opción es generar el contenido dinámicamente desde una mysql y php o utilizándolo en una plantilla de CMS como joomla o wordpress. Viene muchos plugin ya programados pero con unas pocas lineas de código podemos crear nuestro propio componente. Espero que os haya servido.
Para realizarlo vamos a utilizar el framework Jquery, que es una librería para facilitar el trabajo con el lenguaje Javascript. Descargamos la librería desde Jquery.com, también es posible que puedas usarla tirando de googleapis.com usando este código en tu página html para añadir este script.
<head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </head>
Si lo has descargado de la página de Jquery y lo has subido a algún directorio de tu web, lo debes poner que punte hacia tu dominio como el siguiente ejemplo:
<head> <script src="http://TUDOMINIO.COM/js/jquery.min.js"></script> </head>
Ahora vamos a descargar Nivo slider que es la librería Jquery que nos permitira crear el slider. Desde aquí puedes descargar gratis Nivo slider. Descomprimimos el fichero en nuestro directorio, aquí podemos ver la estructura de la web.
Ahora vamos a crear un fichero index.html para nuestra web, en el encabezado pondremos las librerias y hojas de estilos. Podemos observar la librería Jquery, la librería de nivo slider y las hojas de estilo propia de Nivo slider, luego podremos personalizarlas.
Ahora vamos a crear un contenedor para nuestras imágenes y para el slider, para esto y poder mostrarlo se creo dentro del mismo index.html (También se puede crear en en fichero hojas de estilo CSS, a gusto de cada uno).
Comenzamos con la estructura de la web y del slider mismo insertandfo las imagenes a mostrar y un mensaje.
Luego activamos el plugin nivo Silder y le enviamos parametros acerca tipo de efecto, de tiempo entre animación, pausa entre imagen y muchos mas que pueden verse en la documentación de Nivo Slider.
Observemos que se activa el id #silder el mismo donde defino las imágenes, osea que si quiero tener más de un slider deberé replicar la misma estructura y activarlo para el id que corresponda.
El resultado de testear index.html en un navegador es:
Aquí vemos la segunda diapositiva, debajo vemos el numero de diapositivas 1 y 2, y los enlaces por defecto Prev( anterior) Next (siguiente) vamos a mejorar la vista de eso mediante css.
Podemos cambiar los numeros por viñetas simplemente buscando en nivo-silder.css
.nivo-controlNav {
text-align: left;
padding: 0;
position: relative;
z-index: 10;
}
.nivo-controlNav a {
display:inline-block;
width:10px;
height:10px;
background:url(bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin: 0 2px;
}
.nivo-controlNav a.active {
background-position:0 100%;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background: url(arrows.png) no-repeat;
text-indent:-9999px;
border:0;
top: auto;
bottom: -36px;
z-index: 11;
}
.nivo-directionNav a:hover {
background-color: #eee;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
a.nivo-nextNav {
background-position:160% 50%;
right:0px;
}
a.nivo-prevNav {
background-position:-60% 50%;
left: auto;
right: 35px;
}
El resultado de este cambio será los números cómo viñetas a izquierda y los enlaces cómo flechas a la derecha.
Vamos extender la funcionalidad mostrando un bloque da datos en una de las diapositivas
Modificando el codigo que ya tenemos cambiamos el parrafo en la diapositiva 2 por un bloque al que llamare con un id #bloque2, luego Creo el bloque y le aplico un estilo oculto para que solo se vea cuando se active la diapositiva 2.
El resultado es el siguiente:
También podría poner imágenes en miniatura. Otra opción es generar el contenido dinámicamente desde una mysql y php o utilizándolo en una plantilla de CMS como joomla o wordpress. Viene muchos plugin ya programados pero con unas pocas lineas de código podemos crear nuestro propio componente. Espero que os haya servido.
