Plugin de secuencia de JavaScript básico responsive Vanilla-Vanilla Carousel

Vista prévia

Descripción

Un plugin de carrusel responsive de JavaScript que utiliza animaciones CSS3 para hacer la transición a través de un conjunto de elementos HTML.

Funcionamiento

Descargue e incluya tanto Vanilla-Carousel. Basic. CSS como Vanilla-Carousel. js en la página HTML.

<link rel="stylesheet" href="src/vanilla-carousel.basic.css">
<script src="src/vanilla-carousel.js"></script>

Añada elementos de carrusel a un contenedor llamado ' carrusel '.

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

<div class="carousel-item">1</div>

<div class="carousel-item">2</div>

<div class="carousel-item">3</div>

<div class="carousel-item">4</div>

<div class="carousel-item">5</div>
</div>

Inicializa el plugin de carrusel de la siguiente manera:

var carousel = new VanillaCarousel(document.getElementById('carousel'), {


// options here
});

Crear botones Prev/Next para navegar entre los elementos de carrusel.

<button id="prev">Prev</button>
<button id="next">Next</button>

Active los botones de navegación.

document.getElementById('prev').addEventListener('click', function () {

carousel.prev();
});

document.getElementById('next').addEventListener('click', function () {

carousel.next();
});

Configuración de carrusel disponible.

var carousel = new VanillaCarousel(document.getElementById('carousel'), {



// css classes


stageClass: 'vanilla-stage',


itemClass: 'vanilla-item',


noAnimationClass: 'vanilla-no-animation',



// enable responsive


responsive: true,



// current item


currentIte: 0,



// infinie looping


loop: false,



// starting item


start: 3



});