Tiempo de lectura:5 Minutos, 57 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.

if(document.querySelector('#container-slider')){
   setInterval('funcionEjecutar("siguiente")',5000);
}
//------------------------------ LIST SLIDER -------------------------
if(document.querySelector('.listslider')){
   let link = document.querySelectorAll(".listslider li a");
   link.forEach(function(link) {
      link.addEventListener('click', function(e){
         e.anteriorentDefault();
         let item = this.getAttribute('itlist');
         let arrItem = item.split("_");
         funcionEjecutar(arrItem[1]);
         return false;
      });
    });
}

function funcionEjecutar(side){
    let parentTarget = document.getElementById('slider');
    let elements = parentTarget.getElementsByTagName('li');
    let curElement, siguienteElement;

    for(var i=0; i<elements.length;i++){

        if(elements[i].style.opacity==1){
            curElement = i;
            break;
        }
    }
    if(side == 'anterior' || side == 'siguiente'){

        if(side=="anterior"){
            siguienteElement = (curElement == 0)?elements.length -1:curElement -1;
        }else{
            siguienteElement = (curElement == elements.length -1)?0:curElement +1;
        }
    }else{
        siguienteElement = side;
        side = (curElement > siguienteElement)?'anterior':'siguiente';

    }
    
    //PUNTOS INFERIORES
    let elementSel = document.getElementsByClassName("listslider")[0].getElementsByTagName("a");
    elementSel[curElement].classList.remove("item-select-slid");
    elementSel[siguienteElement].classList.add("item-select-slid");
    elements[curElement].style.opacity=0;
    elements[curElement].style.zIndex =0;
    elements[siguienteElement].style.opacity=1;
    elements[siguienteElement].style.zIndex =1;
}

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

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#container-slider
{
    position: relative;
    display: block;
    width: 100%;
}
#slider {
    position: relative;
    display: block;
    width: 100%;
    height: 100vh;
    min-height: 500px;
}
#slider li {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    height: 100%;
    display: block;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
    z-index: -1;
    opacity: 0;
}
#container-slider .arrowPrev, #container-slider .arrowNext{
    font-size: 30pt;
    color: rgba(204, 204, 204, 0.65);
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50px;
    z-index: 2; 
}
#container-slider .arrowNext {
    left: initial;
    right: 50px !important;
}
.content_slider{
    padding: 15px 30px;
    color: #FFF;
    width: 100%;
    height: 100%;
}
.content_slider div{
    text-align: center;
}
.content_slider h2{
    font-family: 'arial';
    font-size: 30pt;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.content_slider p {
    font-size: 15pt;
    font-family: 'arial';
    color: #FFF;
    margin-bottom: 20px;
}
#slider li .content_slider{
    background: rgba(0, 0, 0, 0.50);
    padding: 10px 125px;
}
.content_slider{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btnSlider{
    color: #FFF;
    font-size: 15pt;
    font-family: 'arial';
    letter-spacing: 1px;
    padding: 10px 50px;
    border: 1px solid #CCC;
    background: rgba(37, 40, 80, 0.55);
    border-radius: 31px;
    text-decoration: none;
    transition: .5s all;
}
.btnSlider:hover{
    background: #111;
    border: 1px solid #111;
}
.listslider {
    position: absolute;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
    align-items: center;
    left: 50%;
    bottom: 5%;
    list-style: none;
    z-index: 2;
    transform: translateX(-50%);
}
.listslider li {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    cursor: pointer;
    margin: 0 5px;
}
.listslider li a {
    background: #CCC;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    display: block;
}
.item-select-slid {
    background: #FFF  !important;
}

@media screen and (max-width: 460px){
	.content_slider h2 {
	    font-size: 15pt !important;
	}
	.content_slider p {
	    font-size: 12pt !important;
	}
	#container-slider .arrowPrev, #container-slider .arrowNext{
		font-size: 20pt;
	}
	#container-slider .arrowPrev{
		left: 15px;
	}
	#container-slider .arrowNext{
		right: 15px !important;
	}
	#slider{
		height: 400px;
		min-height: 400px;
	}
	#slider li .content_slider{
		padding: 10px 35px;
	}
	.btnSlider{
		padding: 10px 30px;
    	font-size: 10pt;
	}

}

Crear archivo html

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

  • En las lineas 3 y 4 puedes observar como hemos enlazado el fichero html con la hoja de estilos y el archivo de funciones.
  • En la línea 5 esta conectando con fontawesome que nos permite 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 20, 29 y 38 puedes cambiar el origen de las imágenes de las diapositivas.
  • En las líneas 23, 32 y 41 puedes modificar los títulos de cada una de las diapositivas.
  • En las líneas 24, 33, 42 puedes cambiar el texto que acompaña a cada diapositiva.
  • En las líneas 25, 34 y 43 puedes modificar el texto del botón y su enlace.
<html>
    <head>
        <link rel="stylesheet" href="estilos.css">
        <script defer src="funciones.js"></script>
        <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    </head>
    
    <body>
        <section id="container-slider">	
   <a href="javascript: funcionEjecutar('anterior');" class="arrowPrev"><i class="fas fa-chevron-circle-left"></i></a>
   <a href="javascript: funcionEjecutar('siguiente');" class="arrowNext"><i class="fas fa-chevron-circle-right"></i></a>
   <ul class="listslider">
     <li><a itlist="itList_0" href="#" class="item-select-slid"></a></li>
     <li><a itlist="itList_1" href="#"></a></li>
     <li><a itlist="itList_2" href="#"></a></li>
   </ul>
   <ul id="slider">
     <li style="background-image: url('imagenes/01.jpg'); z-index:0; opacity: 1;">
       <div class="content_slider" >
         <div>
           <h2>Imagen 1</h2>
	   <p>Escribe el texto que aparecerá sobre la imagen número 1.</p>
	   <a href="https://www.migueltroyano.com" target="_blank" class="btnSlider">Acceder</a>
	 </div>
       </div>
     </li>
     <li style="background-image: url('imagenes/02.jpg'); ">
       <div class="content_slider" >
         <div>
           <h2>Imagen 2</h2>
	   <p>Escribe el texto que aparecerá sobre la imagen número 2</p>
	   <a href="https://www.migueltroyano.com" target="_blank" class="btnSlider">Acceder</a>
	 </div>
       </div>
     </li>
     <li style="background-image: url('imagenes/03.jpg'); ">
       <div class="content_slider" >
         <div>
           <h2>Imagen 3</h2>
	   <p>Escribe el texto que aparecerá sobre la imagen número 3</p>
	   <a href="https://www.migueltroyano.com" target="_blank" class="btnSlider">Acceder</a>
	 </div>
       </div>
     </li>
  </ul>
</section>
    </body>
    
</html

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.

Este sitio está protegido por reCAPTCHA y se aplican la política de privacidad y los términos de servicio de Google.

Perfiles en Redes Sociales