Carrusel infinito básico con JavaScript Vanilla

Vista prévia

Descripción

Una biblioteca de JavaScript Pure Vanilla le ayuda a crear un deslizador de imagen simple con funcionalidades básicas de carrusel como el desplazamiento infinito, reproducción automática, paginación y navegación.

Funcionamiento

Incluya el Vanilla-JS-Carousel. CSS que proporcionará los estilos CSS primarios para el carrusel.

<link href="vanilla-js-carousel.css" rel="stylesheet">

Añade imágenes al deslizador como sigue.

<div class="b-carousel" id="carousel">

<div class="b-carousel__frame">


<ul class="b-carousel__items">



<li><img src="1.jpg" alt=""></li>



<li><img src="2.jpg" alt=""></li>



<li><img src="3.jpg" alt=""></li>



<li><img src="4.jpg" alt=""></li>



<li><img src="5.jpg" alt=""></li>


</ul>

</div>
</div>

Incluya el archivo JavaScript Vanilla-JS-Carousel. min. js en la parte inferior del documento para que las páginas se carguen más rápido.

<script src="vanilla-js-carousel.min.js"></script>

Al llamar a la función en el elemento superior, la lista de imágenes se convertirá en un carrusel con controles.

var carousel = new Carousel({


el: "carousel",
// id of the carousel container


infinite: false, // infinite loop


autoplay: false, // starts the rotation automatically


interval: 1500,
// interval between slide changes


show: 0,


// slide to start with


dots: true,


// show navigation dots


arrows: true,

// show navigation arrows


buttons: true,
 // show play/stop buttons


btnPlayText: 'Play',


btnStopText: 'Stop',


arrNextText: '›',


arrPrevText: '‹'
});

carousel.initSlide();

Changelog

08/06/2018

• Bugfix