Una biblioteca JavaScript minimal Carousel

Vista prévia

Descripción

Una biblioteca JavaScript súper pequeña para crear un carrusel/Slider básico en tu página web con bucle infinito, reproducción automática en carga y soporte para cualquier elemento HTML.

Uso básico

Cree un contenedor para el widget de carrusel utilizando listas no ordenadas HTML para los elementos que se puedan desmontar.

<div class="carousel">
<ul>
<li>First impressive message!</li>
<li>Second message with all the magic.</li>
<li>Also, you can configure minimal carousel as you want.</li>
</ul>
</div>

Crea algunos botones usando métodos incorporados que permiten controlar el carrusel de la caja.

<div class="button-set">
<button onclick="myCarousel.prev();">prev()</button>
<button onclick="myCarousel.stop();">stop()</button>
<button onclick="myCarousel.play();">play()</button>
<button onclick="myCarousel.next();">next()</button>
</div>

Incluya script minimal-Carousel. js al final de la página.

<script type="text/javascript" src="minimal-carousel.js"></script>

El JavaScript.

<script type="text/javascript">
var myCarousel = new Carousel();
</script>

Estile el carrusel según sus necesidades.

<style>
.carousel {
width: 50%;
margin: 50px auto;
}
.carousel ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.carousel ul li {
display: none;
font-family: sans;
font-style: 2em;
text-align: center;
}
.button-set {
text-align: center;
}
</style>