Presentación adaptable de pantalla completa con JavaScript vanilla y CSS3

Vista prévia

Descripción

Una biblioteca de JavaScript pura vainilla para crear una página completa, presentación de diapositivas de imagen adaptable o presentación de diapositivas en segundo plano con efectos de transición CSS3 powered.

Funcionamiento

Importe el vanillaSlideshow. CSS y vanillaSlideshow. min. js a la Página Web.

<link rel="stylesheet" href="css/vanillaSlideshow.css">
<script src="js/vanillaSlideshow.min.js"></script>

Inserte imágenes en la presentación con flechas y navegación por viñetas.

<div id="vanilla-slideshow-container">


<div id="vanilla-slideshow">





<div class="vanilla-slide">



<img src="1.jpg" alt="Alt">


</div>



<div class="vanilla-slide" >



<img src="2.jpg" alt="Alt">


</div>





<div class="vanilla-slide" >



<img src="3.jpg" alt="Alt">


</div>





<div class="vanilla-slide" >



<img src="4.jpg" alt="Alt">


</div>


</div>


<!-- slideshow indicators -->

<div id="vanilla-indicators"></div>


<!-- slideshow arrows -->

<div id="vanilla-slideshow-previous">


<img src="images/arrow-previous.png" alt="slider arrow">

</div>

<div id="vanilla-slideshow-next">


<img src="images/arrow-next.png" alt="slider arrow">

</div>

</div>

Si desea crear una proyección de diapositivas de fondo, utilice el atributo Data-src para incrustar imágenes en su lugar.

<div id="vanilla-slideshow">


<div class="vanilla-slide" data-src="1.jpg"></div>


<div class="vanilla-slide" data-src="2.jpg"></div>


<div class="vanilla-slide" data-src="3.jpg"></div>


<div class="vanilla-slide" data-src="4.jpg"></div>

</div>

Inicializar la proyección de diapositivas.

vanillaSlideshow.init({

// auto slideshow, options: true or false

slideshow: true,


// slideshow delay

delay: 5000,


// display arrows, options: true or false

arrows: true,


// display indicators, options: true or false

indicators: true,


// start slideshow randomly, options: true or false

random: false,


// animation speed

animationSpeed: '1s'
});