¿Quieres trabajar en Minsait?
MiguelTroyano.com > Windows > Java > Crear un slide o carrusel en HTML y CSS con Javascript

Crear un slide o carrusel en HTML y CSS con Javascript

, , 5 Comentarios

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.

Tabla de Contenidos ocultar
1 Resultado
2 Paso a paso
2.1 Crear archivo de funciones
2.2 Crear archivo de estilos
2.3 Crear archivo html
3 Descarga

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 múltiples 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 está 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

5 comentarios en “Crear un slide o carrusel en HTML y CSS con Javascript”

  1. Buenos días Miguel.

    Al ver este post he estado mirando el resto de la web y me gusta mucho tu trabajo y cómo te organizas.

    Yo estoy intentando programar un slider al estilo del tuyo. En mi caso lo que hace es que puedas subir las imágenes a una base de datos (trabajo con un hosting) y luego el código del slider toma desde dicha base las imágenes y las muestra como el tuyo. El problema que tengo es que no me queda responsive y por cuestión de trabajo necesito que sea así.

    He estado mirando tu código y sería el idóneo porque es responsive pero necesitaría que en vez de trabajar con url externa tomase las imágenes de la BD y las mostrara.

    Si me puedes ayudar en eso te estaría muy agradecida de verdad.

    Que tengas un excelente día y un cordial saludo.

    1. Buenas tardes, he descargado de nuevo el ejemplo y funciona correctamente tanto en MAC OS con Safari como en Windows con Chrome y Edge. El problema no estaba en el ejemplo descargable sino en el código disponible para copiar el JS que contenía una errata. Ya está solucionado. Gracias por su mensaje.

Escribir un comentario