Open Menu dzosoft
Close Menu dzosoft

   TODO SOBRE INFORMÁTICA Y TECNOLOGÍA


                             




NICOTINE FREE

Publish perfectly-optimized content in 1-click



 
 
 

Cómo crear una presentación de diapositivas receptiva con CSS y JavaScript

 
 

Diapositivas

 
Se utiliza una presentación de diapositivas para recorrer los elementos.




 

Paso 1

Añadir código HTML
<!-- Slideshow container -->
<div class="slideshow-container">
  <!-- Full-width images with number and caption text -->
  <div class="cssSlides fade">
    <div class="number">1 / 4</div>
    <img src="picture-1.jpg" style="width:100%">
    <div class="text">Caption Text</div>
  </div>
  <div class="cssSlides fade">
    <div class="number">2 / 4</div>
    <img src="picture-2.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>

<div class="cssSlides fade"> <div class="number">3 / 4</div> <img src="picture-3.jpg" style="width:100%"> <div class="text">Caption Three</div> </div>
<div class="cssSlides fade"> <div class="number">4 / 4</div> <img src="picture-4.jpg" style="width:100%"> <div class="text">Caption Three</div> </div>
<!-- Next and previous buttons --> <a class="prev" onclick="Slides(-1)">❮</a> <a class="next" onclick="Slides(1)">❯</a> </div> <br>
<!-- The dots --> <div style="text-align:center"> <span class="dot" onclick="Slide(1)"></span> <span class="dot" onclick="Slide(2)"></span> <span class="dot" onclick="Slide(3)"></span> </div>


 

Paso 2

Agregar CSS
Dale estilo a los botones siguiente y anterior, al texto del título y a los puntos

{box-sizing:border-box}
/* Slideshow container */ .slideshow-container { max-width: 1000px; position: relative; margin: auto; }
/* Hide the images by default */ .cssSlides { display: none; }
/* Next & previous buttons */ .prev, .next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; }
/* Position the "next button" to the right */ .next { right: 0; border-radius: 3px 0 0 3px; }
/* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); }
/* Caption text */ .text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; }
/* Number text (1/4 etc) */ .number { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; }
/* The dots */ .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }
.active, .dot:hover { background-color: #717171; }
/* Fading animation */ .fade { animation-name: fade; animation-duration: 1.5s; }
@keyframes fade { from {opacity: .4} to {opacity: 1} }


 

Step 3

Add JavaScript
let slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls function Slides(n) { showSlides(slideIndex += n); }
// Thumbnail image controls function Slide(n) { showSlides(slideIndex = n); }
function showSlides(n) { let i; let slides = document.getElementsByClassName("cssSlides"); let dots = document.getElementsByClassName("dot"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; }




 

Presentación de diapositivas automática

 

Para mostrar una presentación de diapositivas automática, use el siguiente código:
let slideIndex = 0;
showSlides();

function showSlides() { let i; let slides = document.getElementsByClassName("cssSlides"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} slides[slideIndex-1].style.display = "block"; setTimeout(showSlides, 2000); // Change image every 2 seconds }



Fotos de

Anita Austvika su Unsplash

Dell su Unsplash

Jessica Fadel su Unsplash





También te puede interesar


Cómo hacer llamadas Ajax con XMLHTTPRequest

Cómo hacer Drag and Drop en HTML 5 y JavaScript API

Cómo copiar texto al portapapeles usando html, css y javascript

Cómo capturar una foto desde una cámara usando Javascript

Cómo dibujar en el navegador con JavaScript


Leave comment
          

Guardar apodo y correo electrónico en este navegador para la próxima vez.



Cargando...     

Nord VPN