Simple responsive carrusel de diapositivas con vainilla JavaScript

Vista prévia

Descripción

Una presentación JavaScript simple de usar y pura vainilla que permite al visitante recorrer una serie de contenido HTML con flechas y navegación con viñetas.

¿Cómo funciona?

Cargue el script Slideshow. CSS StyleSheet y Slideshow. js en el documento.

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

Inserte contenido de diapositivas, navegación de flechas/viñetas e imágenes de subtítulos en la presentación de diapositivas como se muestra a continuación.

<div class="che-slideshow">

<ol class="slideshow-indicator-container">


<li class="slideshow-indicator">


</li>


<li class="slideshow-indicator inactive-indicator" >


</li>


<li class="slideshow-indicator inactive-indicator" >


</li>


<li class="slideshow-indicator inactive-indicator" >


</li>

</ol>

<div class="slideshow-left-control slideshow-control">


<img src="images/left-arrow.png" class="slideshow-left-arrow slideshow-arrow">

</div>

<div class="slideshow-right-control slideshow-control">


<img src="images/right-arrow.png" class="slideshow-right-arrow slideshow-arrow">

</div>

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


<img src="1.jpg">


<div class="che-slideshow-caption">



This is a caption for a photo.


</div>

</div>

<div class="che-slideshow-slide inactive">


<img src="2.jpg">


<div class="che-slideshow-caption">



This is a caption for a photo.


</div>

</div>

<div class="che-slideshow-slide inactive">


<img src="3.jpg">


<div class="che-slideshow-caption">



This is a caption for a photo.


</div>

</div>

<div class="che-slideshow-slide inactive">


<img src="4.jpg">


<div class="che-slideshow-caption">



This is a caption for a photo.


</div>

</div>
</div>

Agregar detectores de eventos.

(function () {

var prevArrow = document.getElementsByClassName('slideshow-left-control')[0];

var nextArrow = document.getElementsByClassName('slideshow-right-control')[0];


prevArrow.addEventListener('click', CHESLIDESHOW.prevSlide);

nextArrow.addEventListener('click', CHESLIDESHOW.nextSlide);
})();