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="//code.jquery.com/jquery.min.js"></script>
<script src="floatingcarousel.min.js"></script>

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

<script src="jquery.ba-throttle-debounce.min.js"></script>

3. Wrap your item list into the carousel container.

<div class="carousel" 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>

4. Initialize the carousel with default options.

$('#carousel-default').floatingCarousel();

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

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

6. All possible plugin options.

$('#carousel-default').floatingCarousel({

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

$('#carousel-default').floatingCarousel({
  beforeCreateFunction : null,
  afterCreateFunction : null
});

Change log:

2018-06-12

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

2017-08-23

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

2017-08-21

• Reverse default direction for touch; Add reverseOnTouch option

2017-08-19

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