Tiempo de lectura:6 Minutos, 21 Segundos

Con este código vamos a crear un slide o carrusel en HTML y CSS con Javascript. Contendrá tres imágenes con un texto descriptivo y un botón. Este carrusel es responsive y además pasa de una diapositiva a otra automáticamente o por medio de los botones inferiores.

Resultado

Paso a paso

Crear archivo de funciones

El primer paso es crear un archivo de funciones que contendrá el código javascript que permitirá pasar de una diapositiva. En este ejemplo, el fichero lo hemos llamado funciones.js. Puedes ajustar el parámetro de tiempo que es la velocidad con la que se pasa por las diapositivas en la línea 1, sustituye el valor 5000 por el número de segundos que quieras.

Crear archivo de estilos

Create un archivo de estilos o comúnmente conocido como hoja de estilos que contendrá como se deben visualizar las diapositivas, los botones, textos, etc. En este archivo puedes hacer multiples cambios a tu gusto. En este ejemplo, el fichero lo hemos llamado estilos.css

Crear archivo html

Create un archivo html que contendrá el código que permite mostrar las diapositivas en el navegador.

  • En las lineas 1 y 2 puedes observar como hemos enlazado el fichero html con la hoja de estilos y el archivo de funciones.
  • En la línea 3 esta conectando con fontawesome que nospermite usar gráficos de su propiedad sin cargarlos en nuestro servidor. Básicamente lo utilizamos para las flechas izquierda y derecha.
  • En las líneas 19, 28 y 37 puedes cambiar el origen de las imagenes de las diapositivas.
  • En las líneas 22, 31 y 40 puedes modificar los títulos de cada una de las diapositivas.
  • En las líneas 23, 32, 41 puedes cambiar el texto que acompaña a cada diapositiva.
  • En las líneas 24, 33 y 42 puedes modificar el texto del botón y su enlace.

Descarga

Si te resulta complicado, te lo pongo fácil. Descarga el ejemplo y haz doble clic sobre el fichero indice.html

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Perfiles en Redes Sociales