Interactive Carousel In Pure JavaScript – Floating Carousel

Category: Javascript , Slider | October 8, 2018
Views Total:1,722 views
Official Page:Go to website
Last Update:October 8, 2018


Interactive Carousel In Pure JavaScript – Floating Carousel


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

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



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

You Might Be Interested In:

Leave a Reply