Mark
#1

Hay distintos tipos de slider y distintas formas de crearlos, sin duda alguna los sliders se han vuelto uno de los efectos mas populares usados en las paginas webs, esta es una forma de hacer un slider sin usar javascript o jquery, lo hice usando solo CSS, es compatible con las últimas versiones de todos los navegadores incluyendo IE9 aunque en este último no se aprecia correctamente el efecto, pero el slider funciona, la instalación es sencilla y procedo a explicarla:

agregamos lo principal que vendría a ser el CSS lo cual hará de motor para poner en marcha nuestro slider, agregamos lo siguiente en donde tengamos los estilos de nuestra web, en blogger buscamos ]]></b:skin> y arriba pegamos:

See the Pen Slider en CSS3 - ZKreations by eltorga (@eltorga) on CodePen.

Eso vendría a ser lo principal, ahora lo único que necesitamos es la estructura, un tanto complicada, pero útil, agregamos lo siguiente en donde deseamos tener el slider en funcionamiento:

See the Pen Slider en CSS3 - ZKreations by eltorga (@eltorga) on CodePen.

Y listo, terminamos y nuestro slider está listo para funcionar, en este caso funciona atreves del hover, cuando se pase el mouse por una de las etiquetas de la derecha entrará en función

Importante!

1.- El slider no puede contener más de 6 imágenes, solo lo diseñé para esa cantidad como máximo
2.- las imágenes deben ser de 600x480 siempre, no pueden ser ni más pequeñas ni más grandes

El slider también cuenta con un menú muy elegante a la derecha, no afecta al funcionamiento y puede retirarse de su lugar, pero se lo agregué como un extra ^^. Al terminar el resultado final será el siguiente:

See the Pen Slider en CSS3 - ZKreations by eltorga (@eltorga) on CodePen.


Espero les haya gustado, siempre trato de compartirles algo cada vez mejor y trato de superarme siempre a mí mismo, también agradezco a los usuarios que me envían mensajes felicitándome por mi trabajo y apoyándome para que siga adelante, en verdad gracias ^^ y como ven yo comparto mis trabajos gratis, me ayudarían de mucho si recomendar mi blog a sus amigos o conocidos, saludos :)

image quote pre code
Compartir: