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

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.