Biblioteca de diapositivas JavaScript multipropósito-Slideshow. js

Vista prévia

Descripción

Slideshow. js es una biblioteca JavaScript simple pero multifuncional para crear una presentación de diapositivas (o sin bucle) que admita tanto imágenes como contenido HTML mixto.

Funcionamiento

Agregue referencias a Slideshow. CSS y Slideshow. js a su página web.

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

Agregue imágenes junto con la navegación siguiente/anterior y el contador a la Página Web.

<section class="slideshow-images js-slideshow-images">

<nav>



<button class="slideshow-nav slideshow-nav--prev js-slideshow-previous"></button>



<button class="slideshow-nav slideshow-nav--next js-slideshow-next"></button>

</nav>

<div class="slideshow-container js-slideshow-container">



<div class="slideshow-slide js-slideshow-slide">





<img class="slideshow-slide--image" src="1.jpeg"/>



</div>



<div class="slideshow-slide js-slideshow-slide">





<img class="slideshow-slide--image" src="2.jpeg"/>



</div>



<div class="slideshow-slide js-slideshow-slide">





<img class="slideshow-slide--image" src="3.jpeg"/>



</div>

</div>

<aside>



<div class="slideshow-counter js-slideshow-counter"></div>

</aside>
</section>

Inicializar la proyección de diapositivas.

var slideshowImages = Slideshow();
 slideshowImages.init('.js-slideshow-images', true);

Deshabilite el bucle infinito.

var slideshowImages = Slideshow();
 slideshowImages.init('.js-slideshow-images', false);