Carrusel interactivo en JavaScript puro: carrusel flotante

Vista prévia

Descripción

Floating Carousel es una biblioteca de JS pura para renderizar un carrusel interactivo y táctil en el que los usuarios pueden desplazarse por los elementos del carrusel con el movimiento del ratón.

Funcionamiento

Incluya la versión compilada y minimizada de la biblioteca de carrusel flotante en la página HTML.

<script src="floatingcarousel.min.js"></script>

Crea una lista de elementos para el carrusel.

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

<ul>


<li><span>1</span></li>


<li><span>2</span></li>


<li><span>3</span></li>


<li><span>4</span></li>


<li><span>5</span></li>


<li><span>6</span></li>


<li><span>7</span></li>


<li><span>8</span></li>


<li><span>9</span></li>


<li><span>10</span></li>

</ul>
</div>

Inicialice el carrusel flotante y listo.

var myCarousel = new floatingCarousel('#carousel-default');

Opciones posibles para personalizar el carrusel flotante.

var myCarousel = new floatingCarousel('#carousel-default',{


autoScroll : false,


autoScrollDirection : 'left',


autoScrollSpeed : 10000,


initClass: 'floatingCarouselContainer',


looped : true,


scrollerAlignment : 'horizontal',


scrollerOffset : 0,


scrollSpeed : 'medium',


beforeCreateFunction : null,


afterCreateFunction : null,


enableTouchEvents : true,


touchOverflowHidden : true,


reverseOnTouch : true
});

Registro de cambios

10/08/2018

• Añadir animación "Ease-out" a la función STOP-Carousel