Interactive Responsive Scroller Plugin For jQuery - Floating Carousel

File Size: 26.4 KB
Views Total: 2936
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Interactive Responsive Scroller Plugin For jQuery - Floating Carousel

The Floating Carousel jQuery plugin helps you create a responsive, horizontal (or vertical) scroller/carousel component that react to the movement of your cursor (desktop) or finger (touch devices).

How to use it:

1. Place the main JavaScript floatingcarousel.min.js after jQuery JavaScript library like this:

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

2. Include the jQuery throttle / debounce plugin for the 'responsive' functionality.

<script src=""></script>

3. Wrap your item list into the carousel container.

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

4. Initialize the carousel with default options.


5. To make the carousel fully responsive on most screens:

var opts = {
    // options here
responsiveCarousel = $('#carousel-default').floatingCarousel(opts);
$(window).resize($.debounce(100, function () {

6. All possible plugin options.


  // auto scroll
  autoScroll : false,

  // or 'right'
  autoScrollDirection : 'left',

  // scroll speed in milliseconds
  autoScrollSpeed : 10000,

  // initial CSS class
  initClass: 'floatingCarouselContainer',

  // interval rate in milliseconds
  intervalRate : 16,

  // infinite loop
  looped : true,

  // or 'vertical'
  scrollerAlignment : 'horizontal',

  // scroll offset in pixels
  scrollerOffset : 0,

  // or 'slow', 'fast'
  scrollSpeed : 'medium',
  // enable touch events
  enableTouchEvents : true,

  // prevent unwanted page scrolling during touch events
  touchOverflowHidden : true,

  // reverse the the direction on touch
  reverseOnTouch : true

7. Callback functions.

  beforeCreateFunction : null,
  afterCreateFunction : null

Change log:


  • add "ease-out" animation to stop-carousel function


  • Add intervalRate option (set default animation interval to 16) :- fix FF bug in getOffsets() helper function


  • Reverse default direction for touch; Add reverseOnTouch option


  • change to setProperties function

This awesome jQuery plugin is developed by EdamL. For more Advanced Usages, please check the demo page or visit the official website.