Carrusel infinito cronometrado con vainilla JavaScript y CSS3

Vista prévia

Descripción

Carrusel infinito cronometrado que utiliza vainilla JavaScript & animaciones CSS. Es compatible con el desplazamiento horizontal y vertical. Es útil si necesita un elemento de interfaz de usuario para desplazarse continuamente (por ejemplo, ticker que se muestra en un monitor de TV).

Funcionamiento

Importe el Infinite-Carousel. js en el documento.

<script src="dist/infinite-carousel.js"></script>

Añade elementos de diapositiva al carrusel.

<div class="infinite-carousel-shell">

<div id="container" class="infinite-carousel-group infinite-carousel-horizontal">


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


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


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


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


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


<div class="infinite-carousel-group-item">6</div>


<div class="infinite-carousel-group-item">7</div>


<div class="infinite-carousel-group-item">8</div>


<div class="infinite-carousel-group-item">9</div>


<div class="infinite-carousel-group-item">10</div>


<div class="infinite-carousel-group-item">11</div>

</div>
</div>

Inicialice el carrusel.

var infinitecarousel = new InfiniteCarousel('#container', 'horizontal', 8);

Parámetros.

/**
 * Required arguments are:
 * - a container element (string)
 * - a direction ('horizontal' or 'vertical')
 * - the number of items that are visible at once
 */
var infinitecarousel = new InfiniteCarousel('#container', 'horizontal', 3, {

// optional options object (defaults are listed)


timerDuration: 2000,

// set time between advances in milliseconds


transitionDuration: '1s'

// the duration of the animation
});