Interactive Carousel In Pure JavaScript – Floating Carousel

Preview:

Description:

Floating Carousel is a pure JS library for rendering an interactive, touch-enabled carousel where the users are allowed to scroll through the carousel items with mouse move.

How to use it:

Include the compiled and minified version of the floating carousel library on the html page.

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

Create a list of elements for the carousel.

<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>

Initialize the floating carousel and done.

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

Possible options to customize the floating carousel.

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
});

Changelog:

10/08/2018

• add “ease-out” animation to stop-carousel function