Los últimos tutoriales de desarrollo web
 

W3.CSS Diapositivas



Presentación Manual

Visualización de una presentación de diapositivas manual con W3.CSS es muy fácil.

Basta con crear muchos elementos con el mismo nombre de la clase:

Ejemplo

<img class="mySlides" src="img_fjords.jpg">
<img class="mySlides" src="img_lights.jpg">
<img class="mySlides" src="img_mountains.jpg">
<img class="mySlides" src="img_forest.jpg">

Y dos botones para desplazarse las imágenes:

Ejemplo

<a class="w3-btn-floating" onclick="plusDivs(-1)">&#10094;</a>
<a class="w3-btn-floating" onclick="plusDivs(+1)">&#10095;</a>

Y añadir una Javascript para seleccionar las imágenes:

Ejemplo

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    if (n > x.length) {slideIndex = 1}
    if (n < 1) {slideIndex = x.length} ;
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    x[slideIndex-1].style.display = "block";
}
Inténtalo tú mismo "

Explicación JavaScript

En primer lugar, establecer el slideIndex a 1. (primera imagen)

A continuación, llame showDivs () para mostrar la primera imagen.

Cuando el usuario hace clic en uno de los botones de llamada plusDivs ().

La función plusDivs () resta uno o suma uno al slideIndex.

Las pieles showDiv () función (display = "none") todos los elementos con el nombre de clase "mySlides", y pantallas de visualización (= "bloque") el elemento con el dado slideIndex.

Si el slideIndex es mayor que el número de elementos (x.length), la slideIndex se establece en cero.

Si el slideIndex es menor que 1 se establece en el número de elementos (x.length).


Presentación automática

Para mostrar una presentación de diapositivas automática es aún más simple.

Sólo se necesita un poco de JavaScript distinto:

Ejemplo

var slideIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > x.length) {slideIndex = 1}
    x[slideIndex-1].style.display = "block";
    setTimeout(carousel, 2000); // Change image every 2 seconds
}
Inténtalo tú mismo "

Las diapositivas HTML

Las diapositivas no tienen que ser imágenes.

Pueden ser de cualquier contenido HTML:

Slide 1

Lorem ipsum

Slide 2

Lorem ipsum

Slide 3

Lorem ipsum

Ejemplo

<div class="mySlides">
  <div class="w3-container w3-red">
  <h1><b>Did You Know?</b></h1>
  <h1><i>We plan to sell trips to the moon in the 2020s</i></h1>
</div>
Inténtalo tú mismo "

Presentación Leyenda

Trolltunga, Noruega
Luces del Norte, Noruega
Hermosas Montañas
El bosque
¡Montañas!

Añadir un texto de subtítulos para cada diapositiva de imagen con las clases * W3-pantalla y el (topLeft, topright, bottomleft, bottomright o medio):

Ejemplo

<div class="w3-display-container mySlides">
  <img src="img_fjords.jpg" style="width:100%">
  <div class="w3-display-bottomleft w3-container w3-padding-hor-16 w3-black">
    Trolltunga, Norway
  </div>
</div>
Inténtalo tú mismo "

Indicadores Presentación

Un ejemplo de uso de botones para indicar el número de diapositivas que hay en la presentación, y que se deslizan el usuario está viendo actualmente.

Ejemplo

<div class="w3-center">
  <button class="w3-btn" onclick="plusDivs(-1)">&#10094; Prev</button>
  <button class="w3-btn" onclick="plusDivs(1)">Next &#10095;</button>

  <button class="w3-btn demo" onclick="currentDiv(1)">1</button>
  <button class="w3-btn demo" onclick="currentDiv(2)">2</button>
  <button class="w3-btn demo" onclick="currentDiv(3)">3</button>
</div>
Inténtalo tú mismo "

Otro ejemplo:

Ejemplo

<div class="w3-content w3-display-container">
  <img class="mySlides" src="img_nature.jpg">
  <img class="mySlides" src="img_fjords.jpg">
  <img class="mySlides" src="img_mountains.jpg">
  <div class="w3-center w3-display-bottomleft" style="width:100%">
    <div class="w3-left" onclick="plusDivs(-1)">&#10094;</div>
    <div class="w3-right" onclick="plusDivs(1)">&#10095;</div>
    <span class="w3-badge demo w3-border" onclick="currentDiv(1)"></span>
    <span class="w3-badge demo w3-border" onclick="currentDiv(2)"></span>
    <span class="w3-badge demo w3-border" onclick="currentDiv(3)"></span>
  </div>
</div>
Inténtalo tú mismo "

Las imágenes como indicadores

Un ejemplo del uso de imágenes como indicadores:

Ejemplo

<div class="w3-content" style="max-width:1200px">
  <img class="mySlides" src="img_nature_wide.jpg" style="width:100%">
  <img class="mySlides" src="img_fjords_wide.jpg" style="width:100%">
  <img class="mySlides" src="img_mountains_wide.jpg" style="width:100%">

  <div class="w3-row-padding w3-section">
    <div class="w3-col s4">
      <img class="demo w3-border w3-hover-shadow"
      src="img_nature_wide.jpg" onclick="currentDiv(1)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-border w3-hover-shadow"
      src="img_fjords_wide.jpg" onclick="currentDiv(2)">
    </div>
    <div class="w3-col s4">
      <img class="demo w3-border w3-hover-shadow"
      src="img_mountains_wide.jpg" onclick="currentDiv(3)">
    </div>
  </div>
</div>
Inténtalo tú mismo "

Las diapositivas animadas

Ejemplo

<img class="mySlides w3-animate-top"    src="img_01.jpg">
<img class="mySlides w3-animate-bottom" src="img_02.jpg">
<img class="mySlides w3-animate-top"    src="img_03.jpg">
<img class="mySlides w3-animate-bottom" src="img_04.jpg">
Inténtalo tú mismo "

desvanecido Animación

Ejemplo

<img class="mySlides w3-animate-fading" src="img_01.jpg">
<img class="mySlides w3-animate-fading" src="img_02.jpg">
<img class="mySlides w3-animate-fading" src="img_03.jpg">
<img class="mySlides w3-animate-fading" src="img_04.jpg">
Inténtalo tú mismo "